美文网首页
gulp.watch监听到删除事件时,怎么删除对应的dest文件

gulp.watch监听到删除事件时,怎么删除对应的dest文件

作者: microkof | 来源:发表于2016-10-26 10:10 被阅读474次

了解del包:用于删除文件

官网:https://www.npmjs.com/package/del

del包并不是gulp的插件。

测试一下:现在我在test目录新建1.txt,然后用任务删掉它。

var gulp = require('gulp'),
    del = require('del');

gulp.task('del_txt', function () {
    del('test/1.txt');
});

了解Node.js的path对象的path.basename(p, [ext])

使用前需要引入path模块var path = require(“path”);

然后我们了解path.basename(p [, ext]),它的作用是返回一个路径p中最后一个/后面的部分,通常就是文件名。ext是扩展名,如果写上扩展名,比如.txt,那么返回值中会把扩展名抹掉,得到一个没有扩展名的文件名。

构造一个监听

现在,我删除一个scss文件,希望对应的css文件也被删除,怎么搞?

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    path = require('path'),
    del = require('del');

gulp.task('task_sass', function () { // 编译scss文件的任务
    gulp.src(['scssfile/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest('testcss'));
});

gulp.task('watch_scss', function () { // 监听
    var watcher = gulp.watch('scssfile/*.scss', ['task_sass']);
    watcher.on('change', function(event) {
        if (event.type === 'deleted') {
            del('testcss/' + path.basename(event.path, '.scss') + '.css');
        }
    });
});

也就是说,通过path.basename()得到源文件的文件名,然后拼接出目标文件的文件名,再用del删掉它,就OK了。

相关文章

网友评论

      本文标题:gulp.watch监听到删除事件时,怎么删除对应的dest文件

      本文链接:https://www.haomeiwen.com/subject/mygruttx.html