gulp3.9.1配置总结

以下总结基于gulp@3.9.1,主要记录的几个坑点是,配置es6环境, 自行添加版本号,串并行任务运行,压缩js报错处理等

安装gulp

全局安装gulp命令行:npm i gulp-cli -g
or
具体项目中:npm i gulp --save-dev

压缩js报错处理

unable to minitfy javascript开始误以为是压缩已经压缩版的js报的错,反复尝试后,发现是某个js文件存在错误,于是在npm上找到了gulp-util这个插件,用于命令行打印错误的js文件,具体配置如下,

gutil = require('gulp-util')
gulp.task('jstask', function(){
	return gulp.src('public/js/**/*.js')
            .pipe(uglify())
            .on('error', function (err) {
                gutil.log(gutil.colors.red('[Error]'), err.toString());
            })
		    .pipe(gulp.dest('dist'))
})

es6环境配置

该环境依赖gulp-babel,babel-core,babel-preset-es2015插件,目前这里有个坑点,若下载gulp-babel为8.x.x版本,会与另外两个插件存在兼容问题, 所以这里gulp-babel版本改为7.0.0(测试过),具体操作如下:

• 安装npm i --save-dev gulp-babel@7.0.0 babel-core babel-preset-es2015
• 配置

const gulp = require('gulp');
const babel = require('gulp-babel');
 
gulp.task('default', () => {
    return gulp.src('es6/*.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('build'));
});

• 自行添加版本号
  • 方案一
    替换后的样式为例:css/base-b43c0fd074.css,依赖gulp-rev,gulp-rev-collector,
    思路为:指定的静态路径中将文件重命名为文件名-hash.后缀,并写入json文件中, 之后替换html中对应的文件路径
    配置

const rev = require('gulp-rev'),
	  revCollector = require('gulp-rev-collector');
const js_src = 'public/js/**/*.js', //源
	css_src = 'public/css/**/*.css',
	rev_src = 'static/public',  //输出目录
	rev_base = 'static',       //输出根目录
	html_src = 'views/**/*.html' 
//输出版本号静态文件
gulp.task('buildRev', function () {
    return gulp.src([js_src, css_src])
        .pipe(rev())
        .pipe(gulp.dest(rev_src))   //输出版本号静态文件
        .pipe( rev.manifest() )
        .pipe( gulp.dest( rev_base ) );  //json输出
});
//替换html
gulp.task('rev', function () {
					//匹配json, html文件
    return gulp.src(['static/*.json', html_src])
        .pipe( revCollector({
            replaceReved: false
        }) )
        .pipe( gulp.dest(rev_base) )
});

• 方案二
  替换后的样式为例:css/base.css?rev=b43c0fd074,依赖gulp-rev-append,相较于上一个简洁许多,但有个坑点—如果引入的路径为构建的路径，在当前目录下找不到资源的时候该插件无法使用,这是需要修改一下源码,找到node_modules/gulp-rev-append/index.js中:

try {
 data = fs.readFileSync(dependencyPath);
 hash = crypto.createHash('md5');
 hash.update(data.toString(), 'utf8');
  var _rev=new Date().getTime();
  line = line.replace(groups[2], _rev);
}catch(e){
	
}

由于是通过相对路径之后计算hash,若没找到路径,就按照当前时间计算hash,这里可以在catch中添加

var _rev=new Date().getTime();
line = line.replace(groups[2], _rev);

上面的问题迎刃而解了,继续配置gulp-rev-append,如下

revAppend = require('gulp-rev-append');
gulp.task('revAppend', function() {
  gulp.src(html_src)
    .pipe(revAppend())
    .pipe(gulp.dest('dist'))
});

串并行任务运行

串行任务:按照任务一个个依次运行, 如先执行版本号添加,后替换版本号任务等等
依赖gulp-sequence,如下

var gulpSequence = require('gulp-sequence')
gulp.task('sequenceTask', function(cb){
	gulpSequence('bulidRev','replaceRev')(cb)
})

并行任务:任务同时执行, 开启本地服务, 开启监听任务等
gulp.task(‘default’, [‘watch’,‘connect’])

源码参考