javascript - 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

Is something stacking up here which I'm missing?

...

It turns out removing .transform(babelify) from the 'update' removes this issue. Not sure what issues this might cause down the line though... or why that makes it take ages.

是的，通过在 update 处理程序中调用 .transform()，它通过添加多遍转换来“堆叠”。所以每次打包时，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();
});