gulp.watch的两种使用方法

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()回调函数式写法，想执行任务列表，就用任务列表式写法。