使用gulp实现静态资源版本号替换

使用gulp实现静态资源版本号替换https://blog.csdn.net/wangjun5159/article/details/75137254

2017年07月14日 22:34:21

阅读数：2657

静态版本号替换的由来

一般，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，页面中都引用新文件，v一、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_WORKSPACE\MYAPP
└─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>