给请求的文件加上唯一的版本号,这样浏览器就会加载新文件,防止因缓存产生的问题。下面是用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;
详细操作参考:https://www.shawnlin.cn/7c7acf5e/#%E5%AE%89%E8%A3%85%E6%8F%92%E4%BB%B6%E4%BE%9D%E8%B5%96