Gulp 监听文件删除事件

2016-03-31

Gulp是前端自动化的一个非常有用的工具, 如何使用Gulp甚至可以单开一个系列(一定会的!).

在使用Gulp的过程中, 有一个非常讨厌的问题, 就是监听文件删除事件.

设想这样一个场景, 我们在src/写ES6, 通过gulp-babel转化为ES5文件, 输出到build/下, 同时, 使用gulp-inject将build/下的js文件通过script标签的方式添加到index.html中;

增改文件都是极好的, 但是如果删除了src/下的某个文件, build/ 下的文件并不会自动删除, 所以index.html还是会引用.

怎么解决呢? Show Me the CODE!


gulp.task('watch', ['clean', 'build'], function () {
    gulp.watch('src/index.html', ['inject']);
    var watcher = gulp.watch(['src/**/*', '!src/index.html'], ['babel', 'inject']);
    watcher.on('change', function (event) {
        if (event.type === 'deleted') {
            var src = path.relative(path.resolve('src'), event.path);
            src = src.replace(/.es6$/, '.js');
            var dest = path.resolve(buildDir, src);
            del.sync(dest);
        }
    });
});

最关键的还是这个 var watcher = gulp.watch() 啦, watcher这个句柄就可以监听文件变动的事件了, 其中, event 就有type的属性, 用于表示是新增文件, 还是修改文件, 亦或是删除文件, 然后path属性表示当前变动的文件地址, 知道了这些信息, 就可以干任何事情啦!