遇到的问题
服务器端静态资源更新，客户端有缓存，未能获取到最新的静态资源，导致前端效果未达到预期。
期望
服务器端静态资源更新后，客户端访问时能够获取到最新的静态资源。客户端尽量发送少的请求，服务器端未发生变化时，客户端依然读取本地缓存。尽量少的人工操作。
解决方案
借助基于nodejs的工具gulp，计算静态资源的MD5值做为版本号追加在静态资源的链接后，当静态资源发生变更时，MD5亦会发生变化，客户端会发起新的链接从而拉取到最新的静态资源。
弊端：加载静态资源的页面必须不能缓存，否则无法加载到最新的静态资源链接。频繁更新静态资源导致客户端的缓存过大，不过对于现在PC或者手机来说，空间是足够的。
实施步骤
以linux操作系统为例，注意各种版本号，目录仅为示例，按实际需求位置安装，注意操作用户的权限。
为.html文件中引用的静态添加版本号。
1.安装nodejs
访问NodeJS的官方网站，根据自己的操作系统下载对应的安装包
http://nodejs.cn/download/
linux系统下载后解压即可。
wget https://npm.taobao.org/mirrors/node/v8.4.0/node-v8.4.0-linux-x64.tar.gz
tar xf node-v8.4.0-linux-x64.tar.gz -C /opt/taobao/install/
配置全局命令
ln -s /opt/taobao/install/node-v8.4.0-linux-x64/bin/node /usr/local/bin
ln -s /opt/taobao/install/node-v8.4.0-linux-x64/bin/npm /usr/local/bin
2.可选步骤，npm为nodejs插件管理，因为是国外的下载源，可能网络不稳定。淘宝建立了一个完整npmjs.org镜像，可以用此代替官方版本(只读)，同步频率目前为10分钟一次以保证尽量与官方服务同步。
npm install cnpm -g --registry=https://registry.npm.taobao.org
配置全局命令
ln -s /opt/taobao/install/node-v8.4.0-linux-x64/bin/cnpm /usr/local/bin
cnpm和npm的功能一致，只是下载源不同。以下出现的npm和cnpm可以互换。
3.安装全局的gulp
cnpm install gulp -g
配置全局命令
ln -s /opt/taobao/install/node-v8.4.0-linux-x64/bin/gulp /usr/local/bin
4.选择一个目录开始编写脚本。此目录为模块位置，后续需要更改此位置下插件的源码。
按默认配置创建模块
cnpm init -y
会自动生成一个模块描述文件package.json
5.安装需要的插件
采用局部安装，仅此模块依赖
cnpm install --save-dev gulp
cnpm install --save-dev gulp-rev
cnpm install --save-dev gulp-rev-collector
cnpm install --save-dev gulp-asset-rev
cnpm install --save-dev run-sequence
安装完成后package.json的文件内容如下(注意各插件版本号)：
{
"name": "res_ver",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-asset-rev": "^0.0.15",
"gulp-rev": "^8.1.0",
"gulp-rev-collector": "^1.2.2",
"run-sequence": "^2.2.0"
}
}
6.编写脚本
目录未变更，创建一个文件gulpfile.js。文件内容如下
//引入gulp和gulp插件
var gulp = require('gulp'),
assetRev = require('gulp-asset-rev'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
// 定义css、js源文件路径
var opt = new Object();
//静态资源的源目录
opt.staticSrcFolder = '/WEB-INF/classes/static';
//html文件的源目标
opt.htmlSrcFolder = '/WEB-INF/classes/templates';
//生成静态资源的目录。可与源目录相同，会覆盖。
opt.staticDestFolder = '/WEB-INF/classes/static';
//生成html文件的目录。可与源目录相同，会覆盖。
opt.htmlDestFolder = '/WEB-INF/classes/templates';
// 为css中引入的图片/字体等添加hash编码
gulp.task('assetRev', function() {
return gulp.src(opt.staticSrcFolder + "/**/*.css") // 该任务针对的文件
.pipe(assetRev()) // 该任务调用的模块
.pipe(gulp.dest(opt.staticDestFolder)); // 编译后的路径
});
// CSS、js生成文件hash编码并生成 rev-manifest.json文件名对照映射。可加入.jpg、.png、.svg等
gulp.task('revStatic', function() {
return gulp.src([ opt.staticSrcFolder + "/**/*.css",opt.staticSrcFolder + "/**/*.js" ])
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest(opt.staticDestFolder));
});
// Html替换css、js文件版本
gulp.task('revHtml', function() {
return gulp.src([ opt.staticDestFolder + '/**/rev-manifest.json', opt.htmlSrcFolder + '/**/*.html' ])
.pipe(revCollector())
.pipe(gulp.dest(opt.htmlDestFolder));
});
// 开发构建
//gulp.run是最大限度的并行执行这些任务，而在添加版本号时需要顺序执行这些任务，故使用了runSequence.也有不使用runSequence的写法，阅读起来比较费劲。
gulp.task('default', function(done) {
condition = false;
runSequence(
[ 'assetRev' ],
[ 'revStatic' ],
[ 'revHtml' ],
done);
});
7.修改部分插件源码
1.打开 模块位置/node_modules/gulp-rev/index.js
修改134行 manifest[originalFile] = revisionedFile;
改为 manifest[originalFile] = originalFile + '?v=' + file.revHash;
2.打开 模块位置/node_modules/rev-path/index.js
修改10行 return filename + '-' + hash + ext;
更新为: return filename + ext;
3.打开 模块位置/node_modules/gulp-rev-collector/index.js
修改40行 let cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
更新为：let cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ).split('?')[0];
修改163行 regexp: new RegExp( prefixDelim + pattern, 'g' ),
修改为： regexp: new RegExp( prefixDelim + pattern + '(\\?v=\\w{10})?', 'g' ),
4.打开 模块位置/node_modules/gulp-asset-rev/index.js
修改78~80行：var verStr = (options.verConnecter || "-") + md5;
src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");
改为：var verStr = (options.verConnecter || "") + md5;
src = src + "?v=" + verStr;
8.运行脚本观察结果
可以在模块目录下直接运行命令gulp
或者在任意位置使用gulp --gulpfile <gulpfile path>指定一个脚本执行。
待续
网友评论