gulp自动化添加版本号并修改为参数格式

问题：

1. 当我们修改js和css文件时往往需要清除浏览器的缓存，否则有些效果就看不到更新过后的。
2. 通过对js,css文件内容进行hash运算，生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)
3. 替换html中的js,css文件名，生成一个带版本号的文件名,这样加版本号的静态文件就不会存在缓存的问题了。

解决：

1. gulp有自动化添加版本hash的插件gulp-rev，它的效果是更改文件名，如下

<link rel="stylesheet" href="./css/jquery.e-calendar-de29b48f93.css">
    <link rel="stylesheet" href="./css/base-8688d776d1.css">
    <link rel="stylesheet" href="./css/style-93423ee3ca.css">
           

gulp直接更改了文件名，而我们想要的效果则是下面这种添加版本号。

<link rel="stylesheet" href="./css/jquery.e-calendar.css?v=de29b48f93">
    <link rel="stylesheet" href="./css/base.css?v=8688d776d1">
    <link rel="stylesheet" href="./css/style.css?v=93423ee3ca">
           

1. 所以我们需要更改一下gulp的文件，更改gulp-rev和gulp-rev-collector

打开node_modules\gulp-rev\index.js

• 第144行 manifest[originalFile] = revisionedFile; 更新为:

  manifest[originalFile] = originalFile + ‘?v=’ + file.revHash;

打开nodemodules\gulp-rev\nodemodules\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 ), ” )

• 更新为: if ( !_.isString(json[key]) || path.basename(json[key]).split(‘?’)[0] !== path.basename(key) ) {

  可能你会找不到这一句没关系，把40行按下修改

let cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
 修改为：
 let cleanReplacement =  path.basename(json[key]).split('?')[0];
           

再执行gulp命令，得到的结果如下(效果正确):

<link rel="stylesheet" href="../css/default.css?v=803a7fe4ae">
<script src="../js/app.js?v=3a0d844594"></script>