javascript, глоток, часы, изменились

Question

Я не могу разобраться с этим. Предполагается, что это задание gulp, которое выполняется каждый раз, когда отслеживаемый файл изменяется. Может кто-нибудь объяснить, почему это необходимо для передачи просматриваемых файлов через changed плагин?

gulp.task('build-css', function () {
  return gulp.src(paths.css)
  .pipe(changed(paths.output, {extension: '.css'}))
  .pipe(gulp.dest(paths.output));
});

gulp.task('watch', ['serve'], function() { 
  gulp.watch(paths.css, ['build-css']); 
}); 

Отказ от ответственности: это не мой код. Просто пытаюсь понять, что происходит, чтобы создать собственное задание по наблюдению.

Answer 1

Разница между gulp.watch(), gulp-changed а также gulp-watch кажется, вызывает много путаницы, поэтому вот моя попытка распутать беспорядок:

gulp.watch()

Это единственный из трех, который является частью gulp сам, а не плагин. Это важно, потому что это означает, что в отличие от двух других, оно не передается pipe() функция глотка.

Вместо этого он обычно вызывается прямо из задачи gulp:

 gulp.task('build-css', function() { 
    return gulp.src('src/**/*.css')
      .pipe(doSomethingHere())
      .pipe(gulp.dest('dist/css'));
 }); 

 gulp.task('watch', function() { 
    gulp.watch('src/**/*.css', ['build-css']); 
 }); 

В выше gulp.watch() используется для прослушивания изменений в .css файлы. Пока gulp.watch() работает любое изменение в .css файл автоматически приводит к выполнению build-css задача.

Вот тут и начинается беда. Обратите внимание, что информация о том, какие файлы были изменены, не передается build-css? Это означает, что даже если вы измените только один .css подать все ваши .css файлы будут проходить через doSomethingHere() снова. build-css Задание не имеет понятия, кто из них изменился. Это может быть хорошо, если у вас есть только полные файлы, но вы можете замедлить сборку по мере увеличения количества файлов.

Это где gulp-changed приходит в.

gulp-changed

Этот плагин был написан, чтобы действовать как стадия фильтра в потоке глотка. Его целью является удаление всех файлов из потока, которые не изменились с момента последней сборки. Это делается путем сравнения файлов в исходном каталоге с результирующими файлами в целевом каталоге:

 gulp.task('build-css', function() { 
    return gulp.src('src/**/*.css')
      .pipe(changed('dist/css'))  //compare with files in dist/css
      .pipe(doSomethingHere())
      .pipe(gulp.dest('dist/css'));
 }); 

 gulp.task('watch', function() { 
    gulp.watch('src/**/*.css', ['build-css']); 
 }); 

В приведенном выше build-css Задача по-прежнему вызывается для каждого изменения .css файл и все .css файлы считываются. Однако только те файлы, которые были фактически изменены, теперь достигают дорогостоящего doSomethingHere() этап. Остальное фильтруется gulp-changed,

Этот подход имеет преимущество ускорения build-css даже если вы не наблюдаете за изменениями файлов. Вы можете явно вызвать gulp build-css в командной строке и только те файлы, которые изменились с момента последнего вызова build-css будет перестроен.

gulp-watch

Этот плагин является попыткой улучшить встроенный gulp.watch(), В то время как gulp.watch() использования gaze прослушивать изменения файлов, gulp-watch использования chokidar который обычно считается более зрелым из двух.

Ты можешь использовать gulp-watch добиться того же эффекта, что и при использовании gulp.watch() а также gulp-changed в комбинации:

 gulp.task('watch-css', function() { 
    return gulp.src('src/**/*.css')
      .pipe(watch('src/**/*.css'))
      .pipe(doSomethingHere())
      .pipe(gulp.dest('dist/css'));
 }); 

Это снова смотрит все .css файлы для изменений. Но на этот раз, когда .css файл изменяется, этот файл (и только этот файл) снова считывается и пересылается в поток, через который он проходит doSomethingHere() на пути к каталогу назначения.

---

Обратите внимание, что это сравнение раскрашивает все три альтернативы в довольно обширные штрихи и оставляет некоторые детали и особенности (например, я не говорил о функциях обратного вызова, которые вы можете передать обоим gulp.watch() а также gulp-watch), но я думаю, что этого должно быть достаточно, чтобы выявить основные различия между ними.