前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
来源:互联网 发布:纸模型软件 编辑:程序博客网 时间:2024/05/02 01:07
原理
修改js和css文件通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)替换html中的js,css文件名,生成一个带版本号的文件名
方案
现在网上的方案都是生成一个新的dist目录,里面包含了要发布的html,js,css等文件。但是在实际的公司的项目中,会有情况不能生成新的HTML进行发布,需要在原来的HTML文件上进行js ,css版本的替换. 这里分享下我在实际项目中通过改动插件然后在原目录结构下进行版本的控制方案。
原html文件代码
<link rel="stylesheet" href="../css/default.css"><script src="../js/app.js"></script>
预期效果:在原目录结构下html文件代码
<link rel="stylesheet" href="../css/default.css?v=5a636d79c4"><script src="../js/app.js?v=3a0d844594"></script>
1:安装gulp和gulp插件
执行:
npm install --save-dev gulpnpm install --save-dev gulp-revnpm install --save-dev gulp-rev-collectornpm install --save-dev run-sequence
2:编写gulpfile.js
//引入gulp和gulp插件var gulp = require('gulp'), runSequence = require('run-sequence'), rev = require('gulp-rev'), revCollector = require('gulp-rev-collector');//定义css、js源文件路径var cssSrc = 'css/*.css', jsSrc = 'js/*.js';//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射gulp.task('revCss', function(){ return gulp.src(cssSrc) .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest('rev/css'));});//js生成文件hash编码并生成 rev-manifest.json文件名对照映射gulp.task('revJs', function(){ return gulp.src(jsSrc) .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest('rev/js'));});//Html替换css、js文件版本gulp.task('revHtml', function () { return gulp.src(['rev/**/*.json', 'View/*.html']) .pipe(revCollector()) .pipe(gulp.dest('View'));});//开发构建gulp.task('dev', function (done) { condition = false; runSequence( ['revCss'], ['revJs'], ['revHtml'], done);});gulp.task('default', ['dev']);
执行gulp命令后的效果
//rev目录下生成了manifest.json对应文件{ "default.css": "default-803a7fe4ae.css"}<link rel="stylesheet" href="../css/default-803a7fe4ae.css"><script src="../js/app-3a0d844594.js"></script>
很显然这不是我们需要的效果
3.更改gulp-rev和gulp-rev-collector
打开node_modules\gulp-rev\index.js第144行 manifest[originalFile] = revisionedFile;更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;
打开nodemodules\gulp-rev\nodemodules\rev-path\index.js10行 return filename + '-' + hash + ext;更新为: return filename + ext;
打开node_modules\gulp-rev-collector\index.js31行if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {更新为: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
打开node_modules\gulp-rev-collector\index.js第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),更新为: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' ),
最终结果
经过上面的四步修改之后现在你不管执行多少遍gulp命令,得到的html效果都是:
<link rel="stylesheet" href="../css/default.css?v=5a636d79c4"><script src="../js/app.js?v=3a0d844594"></script>
文章出处
0 0
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- 缓存进阶处理:从不处理到基于gulp的前端静态文件自动添加版本号
- Gulp:静态资源(css,js)版本控制
- 静态资源版本更新与缓存之文件名语义化
- 使用gulp进行自动在js文件后加版本号,使在更新的时候不必手动清理缓存
- 静态资源版本更新与缓存
- gulp自动添加静态文件版本号方案
- Web项目发布 采用gulp压缩 JS CSS CSHTML ASPX HTML Image 给JS CSS自动添加版本号 强制浏览器刷新缓存
- HTML页面自动清理js、css文件的缓存(自动添加版本号)
- 基于 gulp 的自动化构建之“静态资源版本管理”--2017年12月"gulp-rev"版本8.1.0
- gulpfile.js自动化解决js、css缓存问题(添加版本号)
- 利用gulp之gulp-rev-collector给资源文件加时间戳,解决缓存版本控制
- 96. Spring Boot之静态资源版本映射(解决js/css缓存问题)
- 前端自动化之--gulp
- gulp 给静态资源文件添加hash(md5)后缀 防止缓存
- Awk
- grpc java helloworld 简单demo实现
- Git版本恢复命令reset
- stub 和 skeleton 的简单实现
- Android替换/修改系统默认输入法
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- POJ 1741 点分治(点剖)の学习以及模板
- poj2349
- POJ 3484(规律+二分)
- Go中的素数筛选
- 任务的隔离和特权级保护
- js中parseInt();random();Math.ceil的学习
- 设计模式实现——创建者模式
- c++和java区别之string字符串