Gulp Browserify 每次保存/更改都需要更长的时间来编译

Question

我正在尝试使用 Browserify 加快我的 Gulp 工作流程。我正在关注这篇博文： http://christianalfoni.github.io/javascript/2014/08/15/react-js-workflow.html

我一切正常，最初的变化非常快（500 毫秒左右）。

但是，每次我保存文件时，这个时间都会增加。我的任务：

gulp.task('browserify', function() {

var bundler = browserify({
    entries: ['./src/js/app.js'],
    debug: production,
    cache: {},
    packageCache: {},
    fullPaths: true
});

var watcher = watchify(bundler);

return watcher
    .on('update', function() {

        var updateStart = Date.now();

        function transform(next) {
          console.log('JavaScript changed - recomiling via Browserify');
          watcher.transform(babelify).bundle()
          .pipe(source('bundle.js'))
          .pipe(gulp.dest('./build/scripts'))
          .on('end', next);
        }

        transform(function() {
          gulp.start('usemin');
          console.log('Complete!', (Date.now() - updateStart) + 'ms');
        });

    })
    .transform(babelify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./build/scripts'));

所以在第一次构建时，大约需要 3 秒（其中包括一个文件）。

然后，在文件更改时：

JavaScript changed - recomiling via Browserify
[11:31:24] Starting 'usemin'...
Complete! 608ms
[11:31:24] Finished 'usemin' after 24 ms
JavaScript changed - recomiling via Browserify
[11:31:29] Starting 'usemin'...
Complete! 785ms
[11:31:29] Finished 'usemin' after 26 ms
JavaScript changed - recomiling via Browserify
[11:31:31] Starting 'usemin'...
Complete! 814ms
[11:31:31] Finished 'usemin' after 17 ms
JavaScript changed - recomiling via Browserify
[11:31:33] Starting 'usemin'...
Complete! 1112ms
[11:31:33] Finished 'usemin' after 17 ms
JavaScript changed - recomiling via Browserify
[11:31:36] Starting 'usemin'...
Complete! 1594ms
[11:31:36] Finished 'usemin' after 16 ms

我实际上并没有更改文件，只是一遍又一遍地保存它。有什么东西堆积在这里而我错过了吗？

编辑：

事实证明，从“更新”中删除 .transform(babelify) 可以解决此问题。不知道这可能会导致什么问题......或者为什么这需要很长时间。

Answer 1

这里有没有我遗漏的东西？

...

事实证明，从“更新”中删除 .transform(babelify) 可以解决此问题。不知道这可能会导致什么问题......或者为什么这需要很长时间。

是的，通过在update 处理程序中调用.transform()，它通过添加多个转换传递来“堆叠”。所以每次捆绑时，babelify 都会处理捆绑的文件n 次。请参阅 substack/watchify#187，尤其是 @zertosh 的 cmets。你的脚本应该更像这样：

gulp.task('browserify', function () {
  var watcher = watchify(
    browserify({
      entries: ['./src/js/app.js'],
      debug: production,
      cache: {},
      packageCache: {},
      // FYI, this is no longer required in recent versions
      // of watchify, in case that's why you're using it.
      // See https://github.com/substack/watchify/pull/160
      fullPaths: true
    })
      .transform(babelify)
   );

  function bundle () {
    return watcher
      .bundle()
      .pipe(source('bundle.js'))
      .pipe(gulp.dest('./build/scripts'));
  }

  function update () {
    var updateStart = Date.now();

    console.log('JavaScript changed - recomiling via Browserify');

    bundle()
      .on('end', function () {
        gulp.start('usemin');
        console.log('Complete!', (Date.now() - updateStart) + 'ms');
      });
  }

  watcher.on('update', update);

  return bundle();
});