gulp.watch用于監(jiān)聽文件變化，以觸發(fā)任務蝴罪。通常把gulp.watch自身也寫成一個任務。
常規(guī)任務列表式寫法
常規(guī)寫法類似于gulp.watch('*.scss', ['task-sass']);，也就是任務列表的寫法。
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('task-sass', function () {
gulp.src(['testscss1.scss', 'testscss2.scss']) // 引入兩個資源文件
.pipe(sass()) // 執(zhí)行編譯
.pipe(gulp.dest('testcss')); // 輸出到testcss文件夾侄刽，如果沒有就自動創(chuàng)建
});
gulp.task('watch-scss', function () {
gulp.watch('*.scss', ['task-sass']); // 注意，任務列表是個數(shù)組朋凉，即使只有一個元素州丹。
});
命令行輸入gulp watch-scss即可。
如果想寫回調(diào)杂彭，需要另行寫回調(diào)函數(shù)watcher.on('change', function(event) {})墓毒。
回調(diào)函數(shù)會被傳入一個名為 event 的對象，這個對象描述了所監(jiān)控到的變動：
event.type
類型： String
發(fā)生的變動的類型：added, changed 或者 deleted亲怠。
event.path
類型： String
觸發(fā)了該事件的文件的路徑所计。
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('task_sass', function () {
gulp.src(['*.scss'])
.pipe(sass())
.pipe(gulp.dest('testcss'));
});
gulp.task('watch_scss', function () {
var watcher = gulp.watch('*.scss', ['task_sass']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
if (event.type === 'added') {
// ...
} else if (event.type === 'deleted') {
// ...
}
});
});
watch()回調(diào)函數(shù)式寫法
回調(diào)函數(shù)式寫法如下，也就是放棄任務列表团秽，直接寫回調(diào)函數(shù)：
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('watch-scss', function () {
gulp.watch('*.scss', function(event) {
if (event.type === 'added') {
// ...
} else if (event.type === 'deleted') {
// ...
}
gulp.src(['testscss1.scss', 'testscss2.scss']) // 引入兩個資源文件
.pipe(sass()) // 執(zhí)行編譯
.pipe(gulp.dest('testcss')); // 輸出到testcss文件夾醉箕，如果沒有就自動創(chuàng)建
});
});
總結：
不需要執(zhí)行任務列表，只想寫一個回調(diào)的徙垫，就用watch()回調(diào)函數(shù)式寫法，想執(zhí)行任務列表放棒，就用任務列表式寫法姻报。
