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/css/**/style.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/Account/*.cshtml'])

.pipe(dest('../Views/Account/'));

}

//function watching() {

watch("src/css/**/style.css", css);

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

watch("src/js/**/script.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;