gulp-clean----gulpシリーズ(五)

3993 ワード

前述したように、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ブランチ<<を選択してください。