javascript，gulp，watch，改变了 [英] javascript, gulp, watch, changed

问题描述

我无法理解这一点。
这应该是每次观察文件被修改时执行的吞噬任务。任何人都可以解释为什么需要通过更改插件来传输观看文件吗？

  gulp.task（'build-css'，function（）{
 return gulp.src（paths.css）
 .pipe（changed（paths.output，{extension：'.css '}））
 .pipe（gulp.dest（paths.output））; 
}）; 
 $ b $ gulp.task（'watch'，['serve']，function（）{
 gulp.watch（paths.css，['build-css']）; 
}）; 
  

免责声明：这不是我的代码。只是试图了解发生了什么，以创建我自己的自定义监视任务。 $ c> 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'））;
}）;
$ b $ 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.task（'build -css'，function（）{
 return gulp.src（'src / ** / * .css'）
 .pipe（更改（'dist / css'））//比较文件dist / css 
 .pipe（doSomethingHere（））
 .pipe（gulp.dest（'dist / css'））; 
}）; 
 $ b $ 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 ），但我认为这应该足以让三者之间的主要区别得到解决。

I cannot get my head around this. This is supposed to be a gulp task that is executed every time a watched file is modified. Can anyone explain why it is required to pipe the watched files through the 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']); 
}); 

Disclaimer: this is not my code. Just trying to understand what is going on, in order to create my own custom watch task.

解决方案

The difference between gulp.watch(), gulp-changed and gulp-watch seems to cause a lot of confusion, so here's my attempt at untangling the mess:

gulp.watch()

This is the only one of the three that is part of gulp itself and not a plugin. This is important, because it means that unlike the other two it is not passed to the pipe() function of a gulp stream.

Instead it is usually called directly from inside a gulp task:

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

In the above gulp.watch() is used to listen for changes in .css files. As long as gulp.watch() is running any change to a .css file automatically results in the execution of the build-css task.

This is where the trouble starts. Notice how no information about which files where changed is passed to build-css? That means even if you change just a single .css file all of your .css files will pass through doSomethingHere() again. The build-css task has no clue which of them changed. This may be fine as long as you have only a hand full of files, but can slow down your build as the number of files grows.

That's where gulp-changed comes in.

gulp-changed

This plugin was written to act as a filter stage in a gulp stream. Its purpose is to remove all those files from a stream that haven't changed since the last build. It does this by comparing the files in the source directory with the resulting files in the destination directory:

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

In the above the build-css task is still called for every change of a .css file and all .css files are read in. However only those files that were actually changed now reach the expensive doSomethingHere() stage. The rest is filtered out by gulp-changed.

This approach has the benefit of speeding up build-css even if you're not watching for file changes. You can explicitly invoke gulp build-css on the command-line and only those files that have changed since the last invocation of build-css will be rebuilt.

gulp-watch

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

This again watches all .css files for changes. But this time whenever a .css file is changed, that file (and only that file) is read in again and reemitted to the stream where it passes through doSomethingHere() on its way to the destination directory.

---

Note that this comparison paints all three of the alternatives in rather broad strokes and leaves out certain details and features (e.g. I haven't talked about the callback functions that you can pass to both gulp.watch() and gulp-watch), but I think this should be enough to get the major differences between the three across.

这篇关于javascript，gulp，watch，改变了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！