Gulp Plumber或PrettyError在循环中不起作用

Question

我有一个gulp手表的问题，错误后打破。然后我发现了一个很好的参考使用管道工，和它的扩展，gulp-pretty - error。

然后创建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 only changed source
    .pipe(babel()) // do the 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 only changed source
    .pipe(babel()) // do the babel
    .pipe(gulp.dest(reactFrontendDest));
});
gulp.task('watch:frontend', function () {
  gulp.watch(reactFrontendSource, ['babel:frontend']);
});
///////////////////////// FINISH FRONTEND //////////////////////////////////
// all babel react
gulp.task('babel', [
  'babel:squarebook',
  'babel:frontend'
])
// all watchers
gulp.task('watch', [
  'watch:squarebook',
  'watch:frontend'
]);
gulp.task('default', [
  'babel',
  'watch'
]);

prettyError工作得很好。我喜欢这样。但这段代码相当冗余。我还需要创建更多的模块，这将使我每次创建一个模块复制粘贴任务。所以我决定将其重构为:

// require all the 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 the task
    gulp.task(taskName, function () {
      return gulp.src(sourceMap.src)
        .pipe(changed(sourceMap.dest)) // make sure only changed source
        .pipe(prettyError())
        .pipe(babel()) // do the babel
        .pipe(gulp.dest(sourceMap.dest));
    });
    // do the watcher
    gulp.watch(sourceMap.src, [taskName]);
  }
});
gulp.task('default', [
  'babel'
]);

现在我已经尝试在'./common/modules/squarebook/web/jsx/*.{js,jsx}'上创建一个错误，错误没有显示。似乎prettyError只显示最后一个循环中的错误。监视器没有坏，但是没有显示错误。知道为什么会这样吗?

我想知道循环是否出错。

Answer 1

问题是我在匿名函数内使用sourceMap，这将被更新直到循环结束。所以，我的解决方案是:

// require all the 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 to ensure the right closure
function processBabel(src, dest) {
  console.log(src);
  return gulp.src(src)
    .pipe(changed(dest)) // make sure only changed source
    .pipe(prettyError())
    .pipe(babel()) // do the 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 the task
    gulp.task(taskName, processBabel.bind(this, sourceMap.src, sourceMap.dest));
    // do the watcher
    gulp.watch(sourceMap.src, [taskName]);
  }
});

gulp.task('default', [
  'babel'
]);

因此，我创建了其他函数来处理src和dest，这样它就不会被引用更新。