手记

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

0人推荐
随时随地看视频
慕课网APP