glup html文件增加hash,前端静态资源版本更新与缓存——通过gulp 在原html文件上自动化添加js、css、img版本号...

原理

1、修改js和css文件

2、通过对js,css文件内容进行hash运算，生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)

3、替换html中的js,css文件名，生成一个带版本号的文件名

原html文件代码

预期效果：在原目录结构下html文件代码

先说说gulp的使用步骤

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

详细步骤见链接 http://www.ydcss.com/archives/18

下面回到正题，如果给静态资源文件自动添加版本号

1：安装gulp和gulp插件

打开命令指示符(cmd)执行

```

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、img文件路径，是本地css,js,img文件的路径，可自行配置

var cssUrl = 'css/*.css',

jsUrl = 'js/*.js';

imageUrl = 'images/*';

//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'));

});

//img生成文件hash编码并生成 rev-manifest.json文件名对照映射

gulp.task('revImg', function(){

return gulp.src(imageUrl)

.pipe(rev())

.pipe(rev.manifest())

.pipe(gulp.dest('rev/images'));

});

//Html更换css、js、img文件版本

gulp.task('revHtml', function () {

return gulp.src(['rev/**/*.json', './*.html']) /*./是本地html文件的路径，可自行配置*/

.pipe(revCollector())

.pipe(gulp.dest('.')); /*Html更换css、js文件版本,.也是和本地html文件的路径一致*/});

//开发构建

gulp.task('dev', function (done) {

condition = false;

runSequence(

['revCss'],

['revJs'],

['revImg'],

['revHtml'],

done);

});

gulp.task('default', ['dev']);

执行gulp命令后的效果

//rev目录下生成了manifest.json对应文件

{ "common.css": "common-803a7fe4ae.css"}

很显然这不是我们需要的效果

3.更改gulp-rev和gulp-rev-collector

打开node_modules\gulp-rev\index.js

第144行 manifest[originalFile] = revisionedFile;

更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;

打开node_modules\gulp-rev\node_modules\rev-path\index.js

10行 return filename + '-' + hash + ext;

更新为: return filename + ext;

打开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命令，得到的结果如下(效果正确):

但是假如我们更改了css和js后，再执行gulp命令，得到的结果会如下:

有没有发现，会在版本号后面再添加一个版本号，因为gulp只替换了原来文件名，这样又不符合预期效果了，所以我们想到，还需要修改插件的替换正则表达式。

4.继续更改gulp-rev-collector

打开node_modules\gulp-rev-collector\index.js

第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),

更新为: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' ),

现在你不管执行多少遍gulp命令，得到的html效果都是

完美解决！！！！