使用gulp实现静态资源版本号替换
来源:互联网 发布:mac怎么安装输入法 编辑:程序博客网 时间:2024/06/05 09:57
静态版本号替换的由来
通常,js写在单独的文件,然后页面引用js文件,比如
<script type='text/javascript' src="a.js"></script>
在开发时或者上线后,你肯定遇到过,明明修改了js,但是不起作用,因为浏览器缓存了旧js,只能狂摁ctrl+f5。为了fix这个问题,通常会添加版本号。如
<script type='text/javascript' src="a.js?2017080121231"></script>
这会带来两个问题
- 修改了js文件,同时需要修改所有引用js文件的页面
- 现代程序为了追求性能极致,通常将静态文件,放在cdn,那么在发布程序时,就会存在页面、js谁先发布的问题?答案是,在前后端发布间隔内,无论先发布谁都会有问题。
- 先发布页面,再发布脚本
页面是新页面,请求新js,但此时cdn上仍然是老脚本,所以错误 - 先发布脚本,再发布页面
页面是老页面,请求老js,但此时cdn上已经是新脚本,所以错误
- 先发布页面,再发布脚本
分析
- 修改js文件后,修改引用此文件的所有页面中的版本号
- 最笨的办法,就是搜索整个工程,然后替换版本号,这是手动的,手动就意味着效率低下、出错率高,所以,理想状态下,修改完js后,自动替换版本号,那么怎么才能知道需要替换版本号呢?答案是,只要文件内容有变化,就生成新版本号。所以,我们期望有这么个工具,能自动实现这个功能。
- 无论替换谁,都有错误,因为我们是用的覆盖式发布,我们需要增量式发布
- 每次更改js文件,都生成一个新的带版本的文件,比如原文件是a.js,修改后生成a-v1.js,再修改生成a-v2.js,页面中都引用新文件,v1、v2就是第一步的版本号,这样在发布时,先发布脚本,再发布页面,就正确了。
优化目标
知道了,静态资源版本号的由来,我们再确认一下优化目标,也可以说是需求,
- 根据内容自动添加版本号
- 尽量维持现有工程目录,不做大幅更改
- 开发时,自动添加版本号,服务器打包也能添加版本号
- 能区分开发环境和生产环境,进行差异化处理,比如开发环境不压缩便于调试,生产环境进行压缩,减小size
grunt、webpack、gulp选型
目标确定后,打算从grunt/webpack/gulp中,选取一种实现功能。
- grunt据网上说配置很复杂,IO操作多,用的人少,所以放弃了。
- webpack尝试后,发现功能很强大,将一切文件当做模块,会对现有文件更改很大,将依赖的js、css都打包,变动很大,所以放弃。
- gulp小巧玲珑,用的正趁手,基于流,开发起来也简单,所以选用了gulp。
- 首先安装nodejs,现在的前端开发已经离不开nodejs了,建议大家也多接触nodejs。然后安装gulp,这个很简单我才用了本地安装,因为全局安装总是找不到,遂放弃,在安装gulp之前首先创建package.json,在做团队协作时,会有帮助,其它成员就不用一个个安装插件,根据package.json安装一次就行了。package.json相当于maven的pom.xml
gulp具体步骤
创建nodejs配置文件package.json
创建package.json,这是nodejs的配置文件
npm init -y
大体目录是这样的
{ "name": "myapp", "version": "1.0.0", "description": "", "main": "gulpfile.js", "dependencies": {}, "devDependencies": { "gulp": "^3.9.1", "gulp-clean": "^0.3.2", "gulp-clean-css": "^3.9.0", "gulp-jshint": "^2.0.4", "gulp-rename": "^1.2.2", "gulp-rev": "^7.1.2", "gulp-rev-collector": "^1.2.2", "gulp-uglify": "^3.0.0", "gulp-watch": "^4.3.11", "jshint": "^2.9.5", "pump": "^1.0.2", "run-sequence": "^2.2.0" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC"}
可以看见有个devDependencies,每安装一个插件,这里就添加一个,回头提交时,只提交这个文件就可以,团队其他人执行npm install
就可以下载package.json中所有的dependencies。为了接下来能顺利执行,所有的依赖已经配置在devDependencies。
创建gulp的配置文件gulefile.js
gulpfile.js是gulp的配置文件,在里边可以配置很多任务,每个任务干的活不一样,每个任务就是一个线程,如果任务之间有依赖,那么需要指定执行顺序。
根据设想,分为src源文件目录、dist目的文件目录也就是编译后后的目录,rev就是revision修改版本意思,这里存放着版本插件生成的json文件,里边的key值就是要替换文件的路径
D:\GULP_WORKSPACE\MYAPP└─webapp |---gulpfile.js ├─dist ├─rev │ ├─css │ └─js └─src ├─css ├─js │ ├─a │ └─b │ └─a.js └─pages └─a.html
其它的就不多说了,就是常用的几个插件,思路就是将源文件的js、css根据内容生成添加了版本号的文件,然后搜索html文件,将名字替换为版本号名字,然后将其它文件copy到目的目录,还可以监听文件变化,如果变化自动执行任务,类似intellij的编译后触发热替换,配置如下
//引入gulp和gulp插件var gulp = require('gulp'),runSequence = require('run-sequence'),rev = require('gulp-rev'),revCollector = require('gulp-rev-collector'),rename = require('gulp-rename'),uglify = require('gulp-uglify'),clean = require('gulp-clean'),pump = require('pump'),watch = require('gulp-watch'),jshint = require('gulp-jshint')cleanCSS = require('gulp-clean-css');;//定义css、js源文件路径var cssSrc = 'src/**/*.css',jsSrc = ['src/**/*.js','!gulpfile*.js'];//监控文件变化gulp.task('watch', function () { gulp.watch([jsSrc,cssSrc], ['default']);});//检查js语法gulp.task('jslint', function() { return gulp.src(jsSrc) .pipe(jshint()) .pipe(jshint.reporter('default'));});//清空目标文件gulp.task('cleanDst', function () { return gulp.src(['dist','rev'], {read: false}) .pipe(clean());});//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射gulp.task('revCss', function(){ return gulp.src(cssSrc) .pipe(rev()) // 压缩css .pipe(cleanCSS({compatibility: 'ie8'})) .pipe(gulp.dest('dist')) .pipe(rev.manifest()) .pipe(gulp.dest('rev/css'));});//js生成文件hash编码并生成 rev-manifest.json文件名对照映射gulp.task('revJs', function(){ return gulp.src(jsSrc) .pipe(rev()) //压缩 .pipe(uglify()) .pipe(gulp.dest('dist')) //生成rev-manifest.json .pipe(rev.manifest()) .pipe(gulp.dest('rev/js')); });//Html替换css、js文件版本gulp.task('revHtml', function () { return gulp.src(['rev/**/*.json', 'src/**/*.html']) .pipe(revCollector({ replaceReved: true })) .pipe(gulp.dest('dist'));});// 将非js、非css移动到目标目录gulp.task('mvNotDealAsset', function () { return gulp.src(['src/**/*','!src/**/*.css', '!src/**/*.js','!src/**/*.html']) .pipe(gulp.dest('dist'));});//开发构建gulp.task('dev', function (done) { condition = false; runSequence( ['jslint'], ['cleanDst'], ['revCss'], ['revJs'], ['revHtml'], ['mvNotDealAsset'], ['watch'], done);});gulp.task('default', ['dev']);
区分生产环境、开发环境
有时需要区分开发环境和正式环境,比如开发环境下,不需要压缩、不要混淆,方便调试。而正式环境,需要压缩、混淆、合并,减小文件大小。幸运的是,gulp提供了参数控制,
--env production--env development
比如
未完待续
还有一块没写,就是gulp与intellij的结合,intellij中tomcat启动时,自动执行gulp任务,并监听文件变化,这样的话,开发时就不用狂摁ctrl+f5了
效果
在html/jsp中为引用的css、js根据内容信息摘要自动添加版本号,如果内容不变则维持原版本号。
<script type='text/javascript' src="a-1df23s4.js"></script>
参考
大公司里怎样开发和部署前端代码?
- 使用gulp实现静态资源版本号替换
- 转战gulp,实现前端静态资源的压缩,加MD5戳,替换引用,加CDN前缀
- gulp实现前端静态资源的压缩,加MD5戳,替换引用,加CDN前缀
- gulp改造gulp-rev-append插件实现资源文件链接自动添加MD5版本号
- gulp实现静态资源压缩,打包,上传总结
- gulp自动添加静态文件版本号方案
- velocity自定义标签实现给静态资源添加版本号
- springMVC 静态资源加版本号
- 静态文件版本号替换与压缩
- gulp 静态资源打包 压缩 合并
- Gulp:静态资源(css,js)版本控制
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- gulp生成资源路径(gulp-edit的使用)
- 使用gulp对引用的文件添加版本号
- gulp自动添加版本号
- 如何优雅的使用telnet测试端口连通性
- bzoj3916 [Baltic2014]friends 暴力
- Android面试之URI和URL的区别
- boost智能指针shared_ptr Assertion px != 0 failed
- 嵌入式Linux入门6:u-boot移植
- 使用gulp实现静态资源版本号替换
- Linux 周期性任务计划
- JS编程训练 | 题15:正确使用parseInt
- go语言一年的实践经验!
- 数据库_SQL高级查询
- CHROME开发者工具的小技巧
- 中国电信ChinaNet骨干网大区片区和省级节点
- 装饰者模式 VS 建造者模式
- mybatis之动态代理