0

我对 gulp watch 有一个问题，它在错误后会中断。然后我找到了一个很好的参考来使用水管工，以及它的扩展，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 只显示最后一个循环中的错误。观察者没有中断，但不显示错误。知道为什么会这样吗？

我想知道循环是否出错。

4

1 回答 1

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'
]);

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

于 2016-06-28T16:28:46.830 回答