以下总结基于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’])