javascript, gulp, 观看, 改变

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.

这篇关于javascript, gulp, 观看, 改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！