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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容