javascript、gulp、观看、更改

我无法理解这个问题。 这应该是每次修改监视文件时执行的 gulp 任务。任何人都可以解释为什么需要通过管道传输监视的文件changed plugin?

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']); 
}); 

免责声明：这不是我的代码。只是想了解发生了什么，以便创建我自己的自定义监视任务。

和...之间的不同gulp.watch(), gulp-changed and gulp-watch似乎引起了很多混乱，所以这是我试图解决这个混乱的问题：

gulp.watch()

这是三者中唯一的一个part of gulp itself https://github.com/gulpjs/gulp/blob/ae1ef092e6e3853760224f1b7acf5876f81c03f0/docs/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb而不是插件。这很重要，因为这意味着与其他两个不同，它不会传递给pipe()gulp 流的函数。

相反，它通常直接从 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()正在对 a 进行任何更改.css文件自动导致执行build-css task.

这就是麻烦开始的地方。请注意，有关更改的文件的信息没有传递到build-css？这意味着即使你只改变一个.css file all你的.css文件将通过doSomethingHere()再次。这build-css任务不知道其中哪一个发生了变化。只要您只有一手的文件，这可能没问题，但随着文件数量的增加，可能会减慢您的构建速度。

那就是那里gulp-changed进来。

gulp-changed

This plugin https://www.npmjs.com/package/gulp-changed被编写为充当 gulp 流中的过滤器阶段。其目的是从流中删除自上次构建以来未更改的所有文件。它通过将源目录中的文件与目标目录中的结果文件进行比较来实现此目的：

 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

This plugin https://www.npmjs.com/package/gulp-watch是对内置的改进的尝试gulp.watch(). While gulp.watch() uses gaze https://www.npmjs.com/package/gaze监听文件更改，gulp-watch uses chokidar https://www.npmjs.com/package/chokidar通常被认为是两者中更成熟的一个。

您可以使用gulp-watch达到与使用相同的效果gulp.watch() and 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文件被更改，该文件（和only该文件）被再次读入并重新发送到它所经过的流中doSomethingHere()正在前往目标目录的途中。

请注意，此比较以相当粗略的方式描绘了所有三种替代方案，并省略了某些细节和功能（例如，我还没有讨论您可以传递给两者的回调函数）gulp.watch() and gulp-watch），但我认为这应该足以了解三者之间的主要差异。