gulp打包（壓縮css,js,加md5碼，圖片壓縮）

通配符路徑匹配示例：

「src/a.js」：指定具體文件；

「*」：匹配全部文件    例：src/*.js(包含src下的全部js文件)；

「**」：匹配0個或多個子文件夾    例：src/**/*.js(包含src的0個或多個子文件夾下的js文件)；

「{}」：匹配多個屬性    例：src/{a,b}.js(包含a.js和b.js文件)  src/*.{jpg,png,gif}(src下的全部jpg/png/gif文件)；

「!」：排除文件    例：!src/a.js(不包含src下的a.js文件)；

圖片壓縮

var imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant');

gulp.task('imagemin', function () {
    return gulp.src('src/asset/img/**/*') //須要壓縮的圖片
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()]
        }))
        .pipe(gulp.dest('imagemin-dist'));//壓縮後的圖片所放的位置
});

 

壓縮css js,添加對應md5

var minifyCss = require('gulp-minify-css');         //- 壓縮CSS文件；
var uglify = require('gulp-uglify');                //- 壓縮js代碼
var rev = require('gulp-rev');                      //- 對css、js文件名加MD5後綴

　var revCollector = require('gulp-rev-collector'); //- 路徑替換

*壓縮js文件，並生成md5後綴的js文件*/
gulp.task('compress-js',function (callback) {       //- 建立一個名爲compress-js的task
    pump([
        gulp.src(['jsbabel/**/*.js']),             //- 須要處理的js文件，放到一個字符串數組裏
        uglify(),                             //- 壓縮文件
        rev(),                                //- 文件名加MD5後綴
        gulp.dest('dist/asset/'),                 //- 另存壓縮後的文件
        rev.manifest(),                       //- 生成一個rev-manifest.json
        gulp.dest('rev-js')                  //- 將rev-manifest.json保存到 rev-js 目錄內
        .on('end',function () {
            console.log('compress-js has been completed');
        })
    ],callback)
});

/*壓縮css文件，並生成md5後綴的css文件*/
gulp.task('compress-css', function(callback) {      //- 建立一個名爲compress-css的task
    gulp.src(['src/css/**/*.css'])           //- 須要處理的css文件，放到一個字符串數組裏
        .pipe(minifyCss())                          //- 壓縮處理成一行
        .pipe(rev())                                //- 文件名加MD5後綴
        .pipe(gulp.dest('dist/css'))                //- 輸出文件到dist/css目錄下
        .pipe(rev.manifest())                       //- 生成一個rev-manifest.json
        .pipe(gulp.dest('rev-css'))                 //- 將rev-manifest.json保存到rev-css目錄內
        .on('end',function () {
            console.log('compress-css has been completed');
            callback();
        });
});

/*修改html文件的link標籤和script標籤引用的css和js文件名，並把html文件輸出到指定的位置*/
gulp.task('rev-html',['compress-css','compress-js'], function() {          //- compress-css和compress-js任務執行完畢再執行rev-index任務
    /*修改其它html文件的link標籤和script標籤引用的css和js文件名，並把html文件輸出到指定的位置*/
    gulp.src(['rev-css/*.json','rev-js/*.json', './src/**/*.html'])     //- 讀取兩個rev-manifest.json文件以及須要進行css和js名替換的html文件
        .pipe(revCollector())                                                      //- 執行文件內css和js名的替換
        .pipe(gulp.dest('./dist'));                                            //- 替換後的html文件輸出的目錄
});

/*最終執行的任務-css*/
gulp.task('rev',['rev-html']);

babel  編譯

var babel = require('gulp-babel')
var clean = require('gulp-clean');                  //- 用於刪除文件
gulp.task('cleanbabel',function () {                     //刪除dist目錄下的全部文件
        gulp.src('jsbabel/js/*.js',{read:false})
        .pipe(clean());
        gulp.src('jsbabel/component/*.js',{read:false})
        .pipe(clean());
});

/* 編譯es6-es5*/
gulp.task('babel',['cleanbabel'],function(){
    gulp.src('src/asset/**/*.js')
    .pipe(babel())
    .pipe(gulp.dest('jsbabel'))
    .on('end',function(){
        console.log('babel has been completed')
    })
})

　　

移動圖片到制定位置

// move
gulp.task('move', function() {
    return gulp.src(
        ['src/asset/img/**'], {
            base: './src/asset/'   //若是設置爲 base: 'js' 將只會複製 js目錄下文件, 其餘文件會忽略
        }
    ).pipe(gulp.dest('dist/asset/'));
});

 
Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，好比Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（好比Object.assign）都不會轉碼