1.生成一个新的dist目录,里面包含了要发布的html,js,css等文件 。
2.在原来的HTML文件上进行js ,css版本的替换,不需要生成新的目录文件。
通过两种方法的实践过程对比,决定使用第二种办法,所以这里介绍一下第二种方式的实现过程:
一.
1. 修改js和css文件
2. 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)
3. 替换原html中的js,css文件名,生成一个带版本号的文件名
原结构下html文件代码:
要达到的效果:在原结构下html文件代码
二.
1.作为项目的开发依赖(devDependencies)安装gulp和gulp插件:
npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev run-sequence
2.编写gulpfile.js
//引入gulp和gulp插件
var gulp = require('gulp'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
//定义css、js文件路径,是本地css,js文件的路径,可自行配置
var cssUrl = 'css/*.css',
jsUrl = 'js/*.js';
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
return gulp.src(cssUrl)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'));
});
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
return gulp.src(jsUrl)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
});
//Html更换css、js文件版本
gulp.task('revHtml', function () {
return gulp.src(['rev/**/*.json', 'WEB-INF/views/*.html']) /*WEB-INF/views是本地html文件的路径,可自行配置*/
.pipe(revCollector())
.pipe(gulp.dest('WEB-INF/views')); /*Html更换css、js文件版本,WEB-INF/views也是和本地html文件的路径一致*/
});
//开发构建
gulp.task('dev', function (done) {
condition = false;
runSequence(
['revCss'],
['revJs'],
['revHtml'],
done);});
gulp.task('default', ['dev']);
三.更改gulp-rev和gulp-rev-collector(重要)
1.打开node_modules\gulp-rev\index.js
第144行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;
2.打开nodemodules\gulp-rev\nodemodules\rev-path\index.js
10行 return filename + '-' + hash + ext;
更新为: return filename + ext;
3.打开node_modules\gulp-rev-collector\index.js
31行if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
更新为: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
四.执行gulp命令,得到的结果如下
五.更改gulp-rev和gulp-rev-collector的原理
当你完成第二步gulpfile.js的编写,然后执行gulp后,你会发现效果如下:
//rev目录下生成了manifest.json对应文件
{ "style.css": "style-0d83247610.css"}
这明显没有达到我们想要的效果,所以要按照第三步的要求更改代码!