gulp-rev版本替换插件

2017-09-14 tool 阅读量

脚手架中运行gulp build命令时会用到版本号插件，插件使用方法如下：

实现原理

解析js和css文件；
通过对js,css文件内容进行hash运算，生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)；
替换html中的js,css文件名，生成一个带版本号的文件名。

`gulp-rev`

将资源文件（css、js、images等）解析，生成一个rev.json，大致如下：

{
  "main.css": "main-202dd5cd78.css",
  "svg.css": "svg-62b1ff821d.css"
}

`gulp-rev-collector`

根据rev.json文件，将html内所有对应关系的资源文件名替换成json内的值

插件修改

工具对文件的操作直接将文件名进行了修改，实际开发我们预想的rev.json应该是这样的

{
  "main.css": "main.css?v=202dd5cd78",
  "svg.css": "svg.css?v=62b1ff821d"
}

修改方法：

1
2
3

打开node_modules\gulp-rev\index.js
第144行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;

1
2
3

打开nodemodules\gulp-rev\nodemodules\rev-path\index.js
10行 return filename + '-' + hash + ext;
更新为: return filename + ext;

1
2
3

打开node_modules\gulp-rev-collector\index.js
40行 let cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
更新为: let cleanReplacement =  path.basename(json[key]).split('?')[0]

踩到的坑

版本问题：

gulp-rev的版本8..0.0在我的脚手架的生成不了rev的json文件

解决方法：使用脚手架里的这个版本"gulp-rev": "^7.1.2",