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  分支<<<