gulp-clean—-gulp系列（五)

前面说过，当css，img，js出现删除操作的时候，虽然watch会监听，但是并不会删除相应文件。

现在实现clean任务，执行任务前先删除一次build目录。

先配置JS任务，设置删除目录。

在系列（四）代码的基础上，再进行扩展。

1.安装gulp-clean:

npm install --save-dev gulp-clean

2.找到gulp->config.js，配置clean:

/* gulp命令会由gulpfile.js运行，所以src和build文件夹路径如下（根目录下） */var src = './src';     var dest = './build';  module.exports = {    less: {        all: src + "/less/**/*.less", //所有less        src: src + "/less/*.less",      //需要编译的less        dest: dest + "/css",          //输出目录        settings: {                      //编译less过程需要的配置，可以为空        }    },    images: {        src: src + "/img/**/*",              dest: dest + "/img"    },    js: {        src: src + "/js/**/*",        dest: dest + "/js"    },    clean:{        src: dest    }}

3.gulp->tasks里新建clean任务:

var gulp = require('gulp');var clean = require('gulp-clean');var config = require('../config').clean;gulp.task("clean", function(){    return gulp.src(config.src)        .pipe(clean());})

4.同时在default任务序列里添加clean任务：

注意！下面这样是错误的：

//因为这样写，这些任务是同步的，完全可能出现边编译边删除的情况

gulp.task('default', ['clean', 'less', 'images', 'js', 'watch']);

所以需要配置一个异步，非常简单，加个回调:

var gulp = require('gulp');gulp.task('default', ['clean'], function(){    gulp.start('less', 'images', 'js', 'watch');});

5.也在deploy任务序列里添加clean：

var gulp = require('gulp');gulp.task('deploy', ['clean'], function(){    gulp.start('less', 'imagemin', 'uglify');});

此时运行gulp，build就会先删除一次。

还是那句话多看官方文档。

>>> github 地址，请选择 clean 分支<<<

文章转载于:https://www.cnblogs.com/1wen/p/4586198.html

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《gulp-clean—-gulp系列（五)》