javascript, gulp, 观看, 改变答案

【问题标题】：javascript, gulp, watch, changedjavascript, gulp, 观看, 改变
【发布时间】：2016-07-09 01:19:39
【问题描述】：

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

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

【问题讨论】：

它正在做的是将它传递给几种方法，例如首先更改为 .css 文件并将转换后的文件放入目标路径。输出。
我假设它只生成实际已更改的文件而不是所有文件。
这是 gulp watch 任务。 gulp.task('watch', ['serve'], function() { gulp.watch(paths.css, ['build-css']); });监视任务不提供有关更改文件的详细信息吗？为什么需要查找更改的文件，如果手表为我们提供了这个？？？似乎多余\

标签： javascript gulp watch gulp-changed

【解决方案1】：

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

`gulp.watch()`

这是三个中唯一一个 part of gulp itself 而不是插件。这很重要，因为这意味着与其他两个不同，它不会传递给 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`

编写此plugin 是为了充当 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`

这个plugin 是对内置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 的回调函数），但我认为这应该足以说明这三者之间的主要区别。

【讨论】：