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

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

- mishoo78

---

它所做的是将其传输到多个方法，例如首先更改为.css文件并将转换后的文件放置在目标路径输出中。 - Jai

我认为它只会生成实际发生更改的文件，而不是所有文件。 - connexo

这是 gulp 的 watch 任务。gulp.task('watch', ['serve'], function() { gulp.watch(paths.css, ['build-css']); }); watch 任务不是提供了有关已更改文件的详细信息吗？ 如果 watch 已经为我们提供了这一点，那么查找已更改的文件为什么是必要的？？？看起来有些多余。 - mishoo78

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

在上述代码中，每当 .css 文件发生更改时，仍会调用 build-css 任务并读取所有 .css 文件。但是，现在只有那些实际更改过的文件才会到达昂贵的 doSomethingHere() 阶段。其余部分由 gulp-changed 进行过滤。

这种方法的好处是即使您不监视文件更改，也可以加快 build-css 的速度。您可以在命令行上明确调用 gulp build-css，并且自上次调用 build-css 以来仅重建那些已更改的文件。

gulp-watch

This 插件 is an attempt to improve on the built-in gulp.watch(). While gulp.watch() uses gaze to listen for file changes, gulp-watch uses chokidar, which is generally considered to be the more mature of the two.

You can use gulp-watch to achieve the same effect as using gulp.watch() and gulp-changed in combination.

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

这个程序会监视所有的.css文件，一旦有变化就重新读取该文件（仅限于该文件），然后重新发射到数据流中，在到达目标目录之前经过doSomethingHere()处理。请注意，html标签应保留。

---

请注意，这种比较是笼统的，并且忽略了某些细节和功能（例如，我没有讨论您可以传递给gulp.watch()和gulp-watch的回调函数），但我认为这应该足以突出三者之间的主要区别。

- Sven Schoenung