gulp html 緩存,gulp解決浏覽器緩存問題

給請求的檔案加上唯一的版本号，這樣浏覽器就會加載新檔案，防止因緩存産生的問題。下面是用gulp-rev生成md5簽名，建構好的檔案名會加上md5簽名，同時生成一個json用來儲存檔案名路徑對應關系。

安裝插件npm install --save-dev gulp

npm install --save-dev gulp-rev

npm install --save-dev gulp-rev-collector

在gulpfile.js中：const { src, dest, lastRun, series, parallel, watch, task } = require('gulp');const JSDIST = 'dist/js/';

const CSSDIST = 'dist/css/';function css() {

return src("src/cssstyle.css", {

allowEmpty: true

})

// .pipe(autoprefixer())

// .pipe(cleanCSS())

// .pipe(rename(path=>{

//     path.basename += '.min';

// }))

// .pipe(dest(CSSDIST))

.pipe(dest(CSSDIST))

//生成映射檔案存放在rev/css目錄

.pipe(dest('rev/css'));

}//

function revHtml(){

//讀取rev目錄下的rev-manifest.json檔案，替換引用的css,js路徑

return src(['rev*.json', '../Views/Accountstyle.css", css);

watch(["js/common.js", "js/copyRightYear.js"], commonJs);

watch("src/jsscript.js", js);

}

const build = series(clean, parallel(css, revHtml));

const dev = series(clean, parallel(css, revHtml), watching);

exports.baseCss = baseCss;

exports.css = css;

exports.baseJs = baseJs;

exports.commonJs = commonJs;

exports.js = js;

exports.dev = dev;

exports.build = build;

exports.ngBaseJs = ngBaseJs;

exports.ngConfigJs = ngConfigJs;