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)从"更新"中删除会消除此问题.不确定这可能会导致什么问题,但是为什么这需要很长时间.

是的,通过调用.transform()的update处理程序是通过添加的变换多遍"堆放".因此,每次捆绑时,babelify都会处理捆绑文件的n次数.参见substack/watchify#187,特别是@ zertosh的评论.你的脚本应该更像这样:

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();
});