gulp經常使用插件的使用

一. 清空文件gulp-clean

//清空生成的文件夾，避免資源冗餘
var clean = require("gulp-clean");
gulp.task("clean",function(){
    return gulp.src("dist",{read:false}).pipe(clean());    
})

注：

1. gulp.src(globs[, options])   輸出（Emits）符合所提供的匹配模式（glob）或者匹配模式的數組（array of globs）的文件。

2. options.read爲false時表示不去讀取文件。

二. css相關（gulp-minify-css、gulp-rev）

//壓縮css
var minifyCss = require("gulp-minify-css");
//版本號
var rev = require("gulp-rev");
gulp.task("css",function(){
   return gulp.src("app/styles/*.css")
              .pipe(minifyCss())
              .pipe(rev())
              .pipe(gulp.dest("dist/app/styles/"))
              .pipe(rev.manifest())
              .pipe(gulp.dest("dist/rev/css"));
})

注：

1.  gulp.minify-css用於壓縮css代碼

2.  gulp-rev更改版本號

3.  rev.manifest()將對應的版本號用json表示出來，用於後面更改引入資源路徑的使用。

三. js相關

var uglify = require("gulp-uglify");
gulp.task('js',function(){
    return gulp.src('app/scripts/*.js')
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest('dist/app/scripts/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/js'))
});

注：

1.  gulp-uglify用於壓縮js代碼

2.  gulp-rev更改版本號

3.  rev.manifest()將對應的版本號用json表示出來，用於後面更改引入資源路徑的使用。

四. 資源路徑更改

var revCollector = require('gulp-rev-collector');
gulp.task('rev',function(){
    return gulp.src(['dist/rev/**/*.json','app/pages/*.html'])
    .pipe( revCollector() )
    .pipe(gulp.dest('dist/app/pages/'));
});

注：

1. 定位html模板須要更改的部分，將修改的文件生成指定目錄。

五. 瀏覽器自動同步

browser-sync插件能夠使用指定的多個瀏覽器運行目標代碼

var gulp = require("gulp");
var browser = require("browser-sync").create(); //瀏覽器自動同步


//browser-sync任務：使用指定的多個瀏覽器運行目標代碼
gulp.task('browser-sync',function(){
    //啓動服務器
    return browser.init({
        server : { 
            baseDir : './build' //目標路徑
        },
        browser : ['chrome'] //使用的客戶端
    })
})

// 監聽build下文件的變化，瀏覽器重載
gulp.task('watch',['browser-sync'],function(){
    gulp.watch(['./build/**/*'],function(){
        browser.reload();
    })
})

gulp.task('default',['browser-sync','watch']);

 六. es6轉化爲es5（配合browser-sync使用）

var gulp = require("gulp");
var browser = require("browser-sync").create(); //瀏覽器自動同步
var babel = require("gulp-babel");


//browser-sync任務：使用指定的多個瀏覽器運行目標代碼
gulp.task('browser-sync',function(){
    //啓動服務器
    return browser.init({
        server : { 
            baseDir : './build' //目標路徑
        },
        browser : ['chrome'] //使用的客戶端
    })
})

// es6轉化es5
gulp.task("babel",function(){
    return gulp.src('./src/**/*.js')
                  .pipe(babel())
                  .pipe(gulp.dest('./build/'))
                  .pipe(browser.reload({stream: true}));
})


// 監聽build下文件的變化，瀏覽器重載
gulp.task('watch',['browser-sync',"babel"],function(){
    gulp.watch(['./src/**/*'],function(){
        browser.reload();
    })
    // 監聽js變化，執行babel任務
    gulp.watch(['./src/*.js'],["babel"]);
})

gulp.task('default',['browser-sync',"babel",'watch']);