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