gulp自動更新版本號
安裝依賴
yarn add gulp-rev
yarn add gulp-rev-collector
本次依賴的版本號為：
"gulp": "^3.9.1"
"gulp-rev": "^8.0.0"
"gulp-rev-collector": "^1.1.1"
插件作用說明
gulp-rev
- gulp-rev:Static asset revisioning by appending content hash to filenames unicorn.css → unicorn-d41d8cd98f.css
- gulp-rev:靜態資源更新，通過追加問價hash值到文件名之上，如：unicorn.css -> unicorn-d41d8cd98f.css
API
revFormat([options])
prefix
Type: string Default: "-"
Prefix appended to Hash.
(hash值的前綴)
suffix
Type: string Default: ""
Suffix appended to Hash.
(hash值的后綴)
lastExt
Type: boolean Default: false
Append formatted Hash just before last extension of a file.
(By default, gulp-rev and this plugin will append the formated Hash just before the first . of a filename)
If true, unicorn.ext1.ext2.css would become unicorn.ext1.ext2-
Note with default options, output is the same with gulp-rev: unicorn.css → unicorn-d41d8cd98f.css
gulp-rev-collector
- Static asset revision data collector from manifests, generated from different streams, and replace their links in html template
- 從manifests(清單)、各種流中收集靜態資源信息，並在html之中替換該引用資源(用新的資源名)
使用方法：
- We can use gulp-rev to cache-bust several assets and generate manifest files for them. Then using gulp-rev-collector we can collect data from several manifest files and replace links to assets in html templates.
- 使用此插件必須基於gulp-rev生成的靜態資源manifest，然后在html替換這些靜態資源的引用。
實例分析
項目demo目錄
- src
- css
- common.css
- img
- hsq.jpg
- js
- index.js
- index.html
- gulpfile.js
index.html代碼 ```html
利用gulp自動添加版本號
```
gulpfile.js的配置如下
const gulp = require('gulp'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
gulp.task('css',function(){
return gulp.src('src/css/*.*')
.pipe(rev())
.pipe(gulp.dest('dist/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'))
})
gulp.task('js',function(){
return gulp.src("src/js/*.*")
.pipe(rev())
.pipe(gulp.dest("dist/js"))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'))
})
gulp.task('rev',['css','js'],function(){
return gulp.src(['rev/**/*.json','src/*.html'])
.pipe(revCollector({
replaceReved: true
})).pipe(gulp.dest('dist'))
})
result:每次當文件變化的時候，那么該文件hash屬性值就會變化，此時gulp-rev新形成新的json格式的manifest,當gulp-rev-collector讀取json清單之后，就會在Html(任意視圖文件)之中替換外部的鏈接。
新的Html文件為:
```html
利用gulp自動添加版本號
```
但這樣的結果並不是我們想要的，理由如下：
- 增加了一些無語義的字符
- 修改了本地的文件，導致文件的新舊不分，不知哪個是最終版本，需要手動刪除（或許可以通過node刪除，但無用功，因為新文件的hash值與原來不一樣，當利用svn這樣的工具時候，會需要全部上傳，才能取消文件改動通知，不友好），然后再編譯。
解決方案：不修改被引用資源的文件名，在模板之中，其請求鏈接之上改為 *.js?v=hash。
解決方案
手動修改這兩個插件
gulp-rev：node_modules\gulp-rev\index.js
manifest[originalFile] = revisionedFile;/*( line 134 ) =>*/
manifest[originalFile] = originalFile + '?v=' + file.revHash;
rev-path：node_modules\rev-path\index.js
return filename + '-' + hash + ext;/*( line 10 )=>*/
return filename + ext;
gulp-rev-collector: node_modules\gulp-rev-collector\index.js （注意：gulp-rev-collector升級后會有變化）
if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
isRev = 0;
}
/*(line 30)=>*/
if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
isRev = 0;
}
return pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
/*(line 50)=>*/
var rp = pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
rp = pattern + "(\\?v=(\\d|[a-z]){8,10})*";
return rp;
patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
+ opts.revSuffix
+ escPathPattern( path.extname(key) )
);
/*(line(90)=>)*/
patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
+ opts.revSuffix
+ escPathPattern( path.extname(key) ) + "(\\?v=(\\d|[a-z]){8,10})*"
);
如此便達到目標了。
結果html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/common.css?v=2289731958">
</head>
<body>
<p> 利用gulp自動添加版本號 </p>
<img src="./img/hsq.jpg" alt="">
</body>
<script src="./js/index.js?v=8b50a3f85f"></script>
</html>
最后為方便使用，已經把修改好的文件發布到npm之上了；
到時候只需要下載下來直接替換個包的index.js文件即可；
yarn add gulp-rev-hu
yarn add rev-path-hu
yarn add gulp-rev-collector-hu
注意：下載我上傳的文件之后，需要將官方版本的js文件進行替換，切記不要替換package,json文件