gulp.watch用于监听文件变化,以触发任务。通常把gulp.watch自身也写成一个任务。
常规任务列表式写法
常规写法类似于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()) // 执行编译
.pipe(gulp.dest('testcss')); // 输出到testcss文件夹,如果没有就自动创建
});
gulp.task('watch-scss', function () {
gulp.watch('*.scss', ['task-sass']); // 注意,任务列表是个数组,即使只有一个元素。
});
命令行输入gulp watch-scss
即可。
如果想写回调,需要另行写回调函数watcher.on('change', function(event) {})
。
回调函数会被传入一个名为 event 的对象,这个对象描述了所监控到的变动:
event.type
类型: String
发生的变动的类型:added, changed 或者 deleted。
event.path
类型: String
触发了该事件的文件的路径。
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()回调函数式写法
回调函数式写法如下,也就是放弃任务列表,直接写回调函数:
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()) // 执行编译
.pipe(gulp.dest('testcss')); // 输出到testcss文件夹,如果没有就自动创建
});
});
总结:
不需要执行任务列表,只想写一个回调的,就用watch()回调函数式写法,想执行任务列表,就用任务列表式写法。