cnpm install --save-dev gulp
cnpm install --save-dev gulp-rev
cnpm install --save-dev gulp-rev-collector
cnpm install --save-dev run-sequence
//引入gulp和gulp插件
var gulp = require('gulp'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
//定义css、js源文件路径
var cssSrc = 'src/main/webapp/**/*.css', //src下的所有css文件
jsSrc = 'src/main/webapp/**/*.js'; //src下的所有js文件
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
return gulp.src(cssSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'));
});
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
return gulp.src(jsSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
});
//Html替换css、js文件版本
gulp.task('revHtml', function () {
return gulp.src(['rev/**/*.json', 'src/main/webapp/**/*.html'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest('src/main/webapp'));
});
//Html替换css、js文件版本
gulp.task('revJsp', function () {
return gulp.src(['rev/**/*.json', 'src/main/webapp/**/*.jsp'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest('src/main/webapp'));
});
//开发构建
gulp.task('dev', function (done) {
condition = false;
runSequence(
['revCss'],
['revJs'],
['revHtml'],
['revJsp'],
done);
});
gulp.task('default', ['dev']);
打开node_modules\gulp-rev\index.js第135行
//manifest[originalFile] = revisionedFile;
manifest[originalFile] = revisionedFile + '?v=' + file.revHash;
node_modules\gulp-rev-collector\index.js
第147行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),
替换为 regexp: new RegExp( dirRule.dirRX + pattern+'(\\?v=\\w{10,})?', 'g' ),
第172行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),
替换为 regexp: new RegExp( prefixDelim + pattern+'(\\?v=\\w{10,})?', 'g' ),