使用gulp实现静态资源版本号替换https://blog.csdn.net/wangjun5159/article/details/75137254
静态版本号替换的由来
通常，js写在单独的文件，然后页面引用js文件，比如
<script type='text/javascript' src="a.js"></script>- 1
在开发时或者上线后，你肯定遇到过，明明修改了js，但是不起作用，因为浏览器缓存了旧js，只能狂摁ctrl+f5。为了fix这个问题，通常会添加版本号。如
<script type='text/javascript' src="a.js?2017080121231"></script>- 1
这会带来两个问题
- 修改了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- 1
大体目录是这样的
{
"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"
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
可以看见有个devDependencies，每安装一个插件，这里就添加一个，回头提交时，只提交这个文件就可以，团队其他人执行npm install 就可以下载package.json中所有的dependencies。为了接下来能顺利执行，所有的依赖已经配置在devDependencies。
创建gulp的配置文件gulefile.js
gulpfile.js是gulp的配置文件，在里边可以配置很多任务，每个任务干的活不一样，每个任务就是一个线程，如果任务之间有依赖，那么需要指定执行顺序。
根据设想，分为src源文件目录、dist目的文件目录也就是编译后后的目录，rev就是revision修改版本意思，这里存放着版本插件生成的json文件，里边的key值就是要替换文件的路径
D:GULP_WORKSPACEMYAPP
└─webapp
|---gulpfile.js
├─dist
├─rev
│ ├─css
│ └─js
└─src
├─css
├─js
│ ├─a
│ └─b
│ └─a.js
└─pages
└─a.html- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
其它的就不多说了，就是常用的几个插件，思路就是将源文件的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']);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
区分生产环境、开发环境
有时需要区分开发环境和正式环境，比如开发环境下，不需要压缩、不要混淆，方便调试。而正式环境，需要压缩、混淆、合并，减小文件大小。幸运的是，gulp提供了参数控制，
--env production
--env development- 1
- 2
比如
未完待续
还有一块没写，就是gulp与intellij的结合，intellij中tomcat启动时，自动执行gulp任务，并监听文件变化，这样的话，开发时就不用狂摁ctrl+f5了
效果
在html/jsp中为引用的css、js根据内容信息摘要自动添加版本号，如果内容不变则维持原版本号。
<script type='text/javascript' src="a-1df23s4.js"></script>