吞咽水管工或PrettyError在循环中不起作用

Question

我有一个问题，吞咽手表，打破了一个又一个错误。然后我找到了一个很好的参考文献来使用水管工，以及它的扩展，吞咽误差。

然后我创建了这个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，这样就不会通过引用来更新它。