Question

我有一个问题，因为gulp watch在发生错误后会破坏。然后我找到了一个好的reference来使用水管工及其扩展，gulp-prettyerror。

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

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

1 个答案: