以下是gulpfile.js的编写方式：
var gulp = require('gulp'),
assetRev = require('gulp-asset-rev'),
runSequence = require('run-sequence'),
minifyCss = require('gulp-minify-css'),
clean = require('gulp-clean'),
uglify = require('gulp-uglify'), //- 压缩js代码
revAll = require('gulp-rev-all'),
revCollector = require('gulp-rev-collector');
var cssSrc = 'webapp/css/**/*.css',
jsSrc = 'webapp/js/**/*.js';
/*//为css中引入的图片/字体等添加hash编码
gulp.task('assetRev', function(){
return gulp.src(cssSrc) //该任务针对的文件
.pipe(assetRev()) //该任务调用的模块
.pipe(gulp.dest('webapp/css')); //编译后的路径
});*/
/*清理文件*/
gulp.task('clean',function () { //删除dist目录下的所有文件
gulp.src(['webapp/asset/*','rev/*'],{read:false})
.pipe(clean());
});
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
return gulp.src(cssSrc)
.pipe(minifyCss())
.pipe(revAll.revision())
.pipe(gulp.dest('webapp/asset/css'))
.pipe(revAll.manifestFile()) //- 生成一个rev-manifest.json
.pipe(gulp.dest('rev/css'));
});
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
return gulp.src(jsSrc)
.pipe(uglify())
.pipe(revAll.revision())
.pipe(gulp.dest('webapp/asset/js')) //- 输出文件到webapp/asset/js目录下
.pipe(revAll.manifestFile()) //- 生成一个rev-manifest.json
.pipe(gulp.dest('rev/js'));
});
//Html替换css、js文件版本
gulp.task('revHtml', function() {
return gulp.src(['rev/**/*.json','resources/templates/**/*.htm']) // 这里的View/*.html是项目html文件路径，如果gulpfile.js和html文件同在一级目录下，修改为return gulp.src(['rev/**/*.json', '*.html']);
.pipe(revCollector())
.pipe(gulp.dest('resources/templates'));// 注意这里是生成的新的html文件，如果设置为你的项目html文件所在文件夹，会覆盖旧的html文件，若上面的View/*.html修改了，这里也要相应修改，如果gulpfile.js和html文件同在一级目录下，修改为 .pipe(gulp.dest(''));
});
//开发构建
gulp.task('default', function(done) {
condition = false;
runSequence( //需要说明的是，用gulp.run也可以实现以上所有任务的执行，只是gulp.run是最大限度的并行执行这些任务，而在添加版本号时需要串行执行（顺序执行）这些任务，故使用了runSequence.
['clean'],
['revCss'],
['revJs'],
['revHtml'],
done);
});
网友评论