gulp自动给css,js批量添加版本号,解决缓存 gulp自动给css,js批量添加版本号,解决缓存

gulp自动给css,js批量添加版本号,解决缓存

每次css或js文件修改之后,浏览器因有缓存而无法及时的呈现最新的页面内容。
解决方法:用gulp自动给html引入的css,js文件批量添加版本号
原html效果:

<link rel="stylesheet" href="css/index.css"> <script src="js/index.js"></script> 

完成效果

<link rel="stylesheet" href="css/index.css?v=d917434f5d"> <script src="js/index.js?v=1513b45ae5"></script> 
1、安装gulp和gulp插件
已安装node和npm包环境下
初始化项目
npm init
安装gulp
npm install --save-dev gulp // v3.9.1  安装插件
npm install --save-dev gulp-rev // v8.1.1  版本号生成插件 npm install --save-dev gulp-rev-collector // v1.3.1 替换版本号路径插件 npm install --save-dev run-sequence // v2.2.1 同步执行任务 
2、项目根目录下创建gulpfile.js文件
//引入gulp和gulp插件 var gulp = require('gulp'),     
    rev = require('gulp-rev'),  
    revCollector = require('gulp-rev-collector'),     
    runSequence = require('run-sequence'); //CSS文件生成版本号(hash编码),并将所有带有版本号的文件放入rev-manifest.json中 gulp.task('revCss', function(){ //gulp.task--定义一个gulp任务;revCSS--定义该任务的名称,起任何名称都可以 return gulp.src('css/*.css') //gulp.src--要操作的源文件路径 .pipe(rev()) //定义一个流,将所有匹配到的文件名全部生成相应的版本号 .pipe(rev.manifest()) //把所有生成的带版本号的文件名保存到json文件中 .pipe(gulp.dest('rev/css')); //把json文件保存到指定的路径,即src下面的css文件,没有该文件,会自动创建 }); //CSS文件生成版本号,并将所有带有版本号的文件放入json中 gulp.task('revJs', function(){ return gulp.src('js/*.js')
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'));
}); //将html文件中的css,js文件引入路径全部替换成带有版本号的 gulp.task('revHtml', function () { return gulp.src(['rev/**/*.json', './*.html']) //gulp.src--第一个参数:生成的json文件的路径,我这里将所有的json文件,js和css,都选中;第二个参数:要替换css,js文件(路径)的HTML文件 .pipe(revCollector())
        .pipe(gulp.dest('./')); //html更换css,js文件版本,更改完成之后保存的地址 }); //开发构建 gulp.task('default', function (done) {
    condition = false;
    runSequence( //需要说明的是,用gulp.run也可以实现以上所有任务的执行,只是gulp.run是最大限度的并行执行这些任务,而在添加版本号时需要串行执行(顺序执行)这些任务,故使用了runSequence. ['revCss'],
        ['revJs'],
        ['revHtml'],
        done);
}); 
3、修改插件配置,因插件版本更新,更改的行数可能会略有差异
1、路径 node_modules/gulp-rev/index.js
第135行  manifest[originalFile] = revisionedFile;
更改为   manifest[originalFile] = originalFile + '?v=' + file.revHash; 2、路径 node_modules/gulp-rev-collector/index.js
第40var cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
更改为 var cleanReplacement=path.basename(json[key]).split('?')[0];
第173行  regexp: new RegExp( prefixDelim + pattern, 'g' ),
更改为   regexp: new RegExp( prefixDelim + pattern+'(\\?v=\\w{10})?', 'g' ), 3、路径 node_modules/rev-path/index.js
第9return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
更改为 return modifyFilename(pth, (filename, ext) => `${filename}${ext}`); 

运行gulp

<link rel="stylesheet" href="css/index.css?v=266e468392"> <script src="js/index.js?v=1513b45ae5"></script> 

目录结构



tips:若不修改插件的配置,生成的效果会是如下:

<link rel="stylesheet" href="css/index-9dfb6111ef.css"> <script src="js/index-1513b45ae5.js"></script>

作者:hongi_k
链接:https://www.jianshu.com/p/2e554161b930


分享本文至:

评论 0

挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论