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，它是＆＃34;堆叠＆＃34;通过添加转换的多个传递。因此，每次捆绑时，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();
});

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

1 个答案: