4

我无法理解这一点。这应该是每次修改监视文件时执行的 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']); 
});

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

4

1 回答 1

15

和之间gulp.watch()的区别似乎引起了很多混乱，所以这是我解开混乱的尝试：gulp-changedgulp-watch

gulp.watch()

这是三个中唯一的一个，它是自身的一部分，gulp而不是插件。这很重要，因为这意味着与其他两个不同，它不会传递给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()运行对文件的任何更改，就会.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），但我认为这应该足以得到三者之间的主要区别跨越。

于 2016-03-22T18:07:50.750 回答