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']);