javascript, gulp, 观看, 改变

2022-01-12 00:00:00 javascript gulp watch gulp-changed

我无法理解这一点.这应该是每次修改监视文件时执行的 gulp 任务.谁能解释为什么需要通过 changed 插件来管道监视的文件?

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.

推荐答案

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

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 本身 的一部分，而不是插件.这很重要，因为这意味着与其他两个不同，它不会传递给 gulp 流的 pipe() 函数.

相反，它通常直接从 gulp 任务内部调用:

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

上面的gulp.watch()用来监听.css文件的变化.只要 gulp.watch() 正在运行对 .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.

这就是麻烦的开始.请注意没有关于哪些文件发生更改的信息传递给 build-css?这意味着即使您仅更改单个 .css 文件 all 您的 .css 文件也将通过 doSomethingHere()再次.build-css 任务不知道它们中的哪一个发生了变化.只要您只有一手文件，这可能没问题，但随着文件数量的增加，您的构建速度会变慢.

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.

这就是 gulp-changed 的用武之地.

That's where gulp-changed comes in.

这个 插件 被编写为在 gulp 流中充当过滤器阶段.其目的是从流中删除自上次构建以来未更改的所有文件.它通过将源目录中的文件与目标目录中的结果文件进行比较来做到这一点:

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

在上面的 build-css 任务仍然为 .css 文件的每次更改调用，并且所有 .css 文件都被读取然而，只有那些实际更改过的文件现在到达昂贵的 doSomethingHere() 阶段.其余的被 gulp-changed 过滤掉.

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.

这种方法的好处是可以加快 build-css 的速度，即使您不关注文件更改.您可以在命令行上显式调用 gulp build-css，并且只有自上次调用 build-css 后发生更改的文件才会被重建.

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().而 gulp.watch() 使用 gaze 监听文件变化，gulp-watch 使用 chokidar 一般认为是两者中比较成熟的一个.

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.

你可以使用 gulp-watch 来达到与使用 gulp.watch() 和 gulp-changed 组合的效果:

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 文件的更改.但是这一次，每当 .css 文件被更改时，该文件(以及 only 该文件)会再次被读入并重新发送到它通过 doSomethingHere 的流中() 在前往目标目录的途中.

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.

请注意，此比较以相当宽泛的笔触描绘了所有三个替代方案，并遗漏了某些细节和功能(例如，我没有讨论您可以传递给这两个的回调函数 gulp.watch() 和 gulp-watch)，但我认为这应该足以了解这三者之间的主要区别.

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.

相关文章