为了账号安全,请及时绑定邮箱和手机立即绑定

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;


详细操作参考:https://www.shawnlin.cn/7c7acf5e/#%E5%AE%89%E8%A3%85%E6%8F%92%E4%BB%B6%E4%BE%9D%E8%B5%96

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消