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）都不会转码