問題描述
我無法理解這一點.這應(yīng)該是每次修改監(jiān)視文件時執(zhí)行的 gulp 任務(wù).誰能解釋為什么需要通過 changed 插件來管道監(jiān)視的文件?
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']);
});
免責(zé)聲明:這不是我的代碼.只是想了解發(fā)生了什么，以便創(chuàng)建我自己的自定義監(jiān)視任務(wù).
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的區(qū)別 似乎引起了很多混亂，所以這是我解開混亂的嘗試:
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() 函數(shù).
相反，它通常直接從 gulp 任務(wù)內(nèi)部調(diào)用:
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()用來監(jiān)聽.css文件的變化.只要 gulp.watch() 正在運行對 .css 文件的任何更改，就會自動執(zhí)行 build-css 任務(wù).
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.
這就是麻煩的開始.請注意沒有關(guān)于哪些文件發(fā)生更改的信息傳遞給 build-css?這意味著即使您僅更改單個 .css 文件 all 您的 .css 文件也將通過 doSomethingHere()再次.build-css 任務(wù)不知道它們中的哪一個發(fā)生了變化.只要您只有一手文件，這可能沒問題，但隨著文件數(shù)量的增加，您的構(gòu)建速度會變慢.
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 流中充當(dāng)過濾器階段.其目的是從流中刪除自上次構(gòu)建以來未更改的所有文件.它通過將源目錄中的文件與目標(biāo)目錄中的結(jié)果文件進行比較來做到這一點:
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 任務(wù)仍然為 .css 文件的每次更改調(diào)用，并且所有 .css 文件都被讀取然而，只有那些實際更改過的文件現(xiàn)在到達昂貴的 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 的速度，即使您不關(guān)注文件更改.您可以在命令行上顯式調(diào)用 gulp build-css，并且只有自上次調(diào)用 build-css 后發(fā)生更改的文件才會被重建.
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.
這個 插件 是對內(nèi)置 gulp 的改進嘗試.watch().而 gulp.watch() 使用 gaze 監(jiān)聽文件變化，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'));
});
這再次監(jiān)視所有 .css 文件的更改.但是這一次，每當(dāng) .css 文件被更改時，該文件(以及 only 該文件)會再次被讀入并重新發(fā)送到它通過 doSomethingHere 的流中() 在前往目標(biāo)目錄的途中.
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.
請注意，此比較以相當(dāng)寬泛的筆觸描繪了所有三個替代方案，并遺漏了某些細節(jié)和功能(例如，我沒有討論您可以傳遞給這兩個的回調(diào)函數(shù) gulp.watch() 和 gulp-watch)，但我認為這應(yīng)該足以了解這三者之間的主要區(qū)別.
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.
這篇關(guān)于javascript, gulp, 觀看, 改變的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！