javascript - Gulp Plumber or PrettyError does not work in a loop -

i have problem gulp watch breaking after error. found reference use plumber, , extension of it, gulp-prettyerror.

then create gulpfile.js

const gulp          = require('gulp'),       babel         = require('gulp-babel')       changed       = require('gulp-changed'),       prettyerror   = require('gulp-prettyerror');   ////////////////////////// start squarebook //////////////////////////////// const reactsquarebooksource   = './common/modules/squarebook/web/jsx/*.{js,jsx}'; const reactsquarebookdest     = './common/modules/squarebook/web/js';  // run babel on squarebook gulp.task('babel:squarebook', function () {   return gulp.src(reactsquarebooksource)     .pipe(prettyerror())     .pipe(changed(reactsquarebookdest)) // make sure changed source     .pipe(babel()) // babel     .pipe(gulp.dest(reactsquarebookdest)); });  gulp.task('watch:squarebook', function () {   gulp.watch(reactsquarebooksource, ['babel:squarebook']); }); ////////////////////////// finish squarebook ///////////////////////////////   ///////////////////////// start frontend /////////////////////////////////// const reactfrontendsource   = './frontend/web/jsx/*.{js,jsx}'; const reactfrontenddest     = './frontend/web/js';  // run babel on frontend gulp.task('babel:frontend', function () {   return gulp.src(reactfrontendsource)     .pipe(prettyerror())     .pipe(changed(reactfrontenddest)) // make sure changed source     .pipe(babel()) // babel     .pipe(gulp.dest(reactfrontenddest)); });  gulp.task('watch:frontend', function () {   gulp.watch(reactfrontendsource, ['babel:frontend']); }); ///////////////////////// finish frontend //////////////////////////////////  // babel react gulp.task('babel', [   'babel:squarebook',   'babel:frontend' ])  // watchers gulp.task('watch', [   'watch:squarebook',   'watch:frontend' ]);  gulp.task('default', [   'babel',   'watch' ]); 

the prettyerror works fine. that. code pretty redundant. still need create more modules, make me copy-paste task each time create module. decided refactor to:

// require libraries const gulp          = require('gulp'),       babel         = require('gulp-babel')       changed       = require('gulp-changed'),       prettyerror   = require('gulp-prettyerror');  // react source map const modulesources = {   squarebook: {     src   : './common/modules/squarebook/web/jsx/*.{js,jsx}',     dest   : './common/modules/squarebook/web/js'   },   frontend: {     src   : './frontend/web/jsx/*.{js,jsx}',     dest  : './frontend/web/js'   } }  gulp.task('babel', function () {   for(var modulename in modulesources) {     var sourcemap = modulesources[modulename];     var taskname = 'babel:' + modulename;      // create task     gulp.task(taskname, function () {       return gulp.src(sourcemap.src)         .pipe(changed(sourcemap.dest)) // make sure changed source         .pipe(prettyerror())         .pipe(babel()) // babel         .pipe(gulp.dest(sourcemap.dest));     });     // watcher     gulp.watch(sourcemap.src, [taskname]);   } });  gulp.task('default', [   'babel' ]); 

now have tried create error on './common/modules/squarebook/web/jsx/*.{js,jsx}', error not displayed. seems prettyerror shows error in last loop. watcher not breaking, error not displayed. idea why happening?

i wonder whether loop making error or not.

the problem use sourcemap inside anonymous function, updated until end of loop. so, solution is:

// require libraries const gulp          = require('gulp'),       babel         = require('gulp-babel')       changed       = require('gulp-changed'),       prettyerror   = require('gulp-prettyerror');  // react source map const modulesources = {   squarebook: {     src   : './common/modules/squarebook/web/jsx/*.{js,jsx}',     dest  : './common/modules/squarebook/web/js'   },   frontend: {     src   : './frontend/web/jsx/*.{js,jsx}',     dest  : './frontend/web/js'   } }  // http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example // create function ensure right closure function processbabel(src, dest) {   console.log(src);   return gulp.src(src)     .pipe(changed(dest)) // make sure changed source     .pipe(prettyerror())     .pipe(babel()) // babel     .pipe(gulp.dest(dest)); }  var babeltasks = []; gulp.task('babel', function () {   for(var modulename in modulesources) {     var sourcemap = modulesources[modulename];     var taskname = 'babel:' + modulename;      // create task     gulp.task(taskname, processbabel.bind(this, sourcemap.src, sourcemap.dest));      // watcher     gulp.watch(sourcemap.src, [taskname]);   } });   gulp.task('default', [   'babel' ]); 

therefore, create other function handle src , dest, not updated reference.