javascript, gulp, watch, changed

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本身的一部分，而不是插件。这很重要，因为这意味着与其他两个不同，它不会传递给 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 流中的过滤阶段。其目的是从流中删除自上次生成以来未更改的所有这些文件。它通过将源目录中的文件与目标目录中的结果文件进行比较来实现此目的：

 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的回调函数），但我认为这应该足以了解三者之间的主要差异。