Gulp Browserify требует больше времени для компиляции при каждом сохранении/изменении

Я пытаюсь ускорить рабочий процесс Gulp, используя Browserify. Я слежу за этой записью в блоге: 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) из «обновления» устраняет эту проблему. Не уверен, какие проблемы это может вызвать в будущем... или почему это требует времени.


npm javascript gulp browserify
person Alias    schedule 14.04.2015    source источник
comment
Попробуйте watchify (github.com/substack/watchify) для дополнительных изменений при сохранении. Это должно быть намного быстрее.   -  person Samuli Hakoniemi    schedule 14.04.2015

Ответы (1)


arrow_upward
7
arrow_downward

Что-то складывается здесь, чего мне не хватает?

...

Оказывается, удаление .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();
});
person JMM    schedule 15.04.2015