開始瀏覽器緩存，我們是在css 和js後面加上隨機數。
<script type="text/javascript">
document.write('<link href="test.css?ver="'+Math.random()+' ref="stylesheet"/>');
document.write('<script src="test.js?ver="'+Math.random()+' type="text/javascript"</script>');
</script>
但是這樣每次頁面打開都會加載隨機數刷新一遍的確是避免了緩存。但是如果使用的人很多，總是刷新頁面就會出現加載很慢的白屏現象。所以我們想能不能每次只刷新修改了的頁面。
於是找到了gulp這種方式，他和上面的原理一樣是css和js後面加隨機數。
但是是每次只改變你修改的文件後面的隨機數。這樣就避免了每次所有請求的頁面都刷新了
下面介紹方法：
1.node和npm的下載是前提。gulp是基於他們使用的。所以要先下載好。如果要用cnpm下載速度可以更快。也可以先下載。、
可以參考我這篇文章進行下載這些如何創建一個vue的新項目，用命令行的方式創建.下載node.js
2.新建一個文件夾在裏面打開命令提示行。執行npm init 。根據提示一直運行到is this ok。輸入yes
之後我們可以看到文件夾裏有個package.json的文件。
3.安裝gulp和gulp插件。爲了能夠下載的快一點我用的cnpm安裝的。
cnpm install --save-dev gulp
cnpm install --save-dev gulp-rev
cnpm install --save-dev gulp-rev-collector
cnpm install --save-dev run-sequence
執行完這些我們發現文件夾裏面多了一個
4.更改gulp-rev和gulp-rev-collector
1.打開node_modules\gulp-rev\index.js
搜索manifest[originalFile] = revisionedFile;改成 manifest[originalFile] = originalFile + '?v=' + file.revHash;
2.打開nodemodules\gulp-rev\nodemodules\rev-path\index.js
搜索return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);改成
return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);
3.打開node_modules\gulp-rev-collector\index.js
搜索var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
改成：var cleanReplacement = path.basename(json[key]).split('?')[0];
5。配置gulpfile.js, 可參考下面gulpfile.js代碼
下面要注意的是頁面所引入的js和css文件的路徑。還有html的路徑。如果與多個js。css要用數組表示。每個html都要配置。根據他們的路徑可能需要寫多個task。下面的例子就是根目錄下有個index.html.views文件夾裏面也有html頁面。
//引入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 = 'lib/*.css', //引入的css文件的路徑和js的路徑可能有多個就用數組表示
jsUrl = ['lib/*.js','lib/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('revHtmlView', function () {
return gulp.src(['rev/**/*.json', 'views/*.html']) /*views是本地html文件的路徑，可自行配置*/
.pipe(revCollector())
.pipe(gulp.dest('views')); /*Html更換css、js文件版本,views也是和本地html文件的路徑一致*/
});
gulp.task('revHtml', function() {
return gulp.src(['rev/**/*.json', '*.html']) /*根目錄下的html頁面*/
.pipe(revCollector())
.pipe(gulp.dest(''));
});
//開發構建
gulp.task('dev', function (done) {
condition = false;
runSequence(
['revCss'],
['revJs'],
['revHtmlView'],
['revHtml'],
done);});
gulp.task('default', ['dev']);
我的文件目錄是這樣的
6，執行npm run gulp
發現報錯了missing script: gulp。
最後發現需要修改package.json裏面的"scripts": {
"gulp": "gulp"
},
還是報錯Task function must be specified。翻譯過來就是：必須指定任務函數
最後發現是gulp 的版本問題，查看package.json此時版本是4.0.2.這個4.0及以上版本的task寫法修改了。最後我就想把gulp版本降低到3.9.1。
執行卸載cnpm uninstall gulp -g
然後重新安裝cnpm install --save-dev [email protected]
最後再試試npm run gulp
本來後面沒有版本號的文件現在後面加了隨機數。
如果我修改了a.css再去執行一下npm run gulp看到下面後面的隨機數就變了。
