你的位置:首页 > ASP.net教程

[ASP.net教程]gulp 自动添加版本号


本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理

npm官网介绍使用后的效果如下:

"/css/style.css" => "/dist/css/style-1d87bebe.css""/js/script1.js" => "/dist/script1-61e0be79.js""cdn/image.gif" => "//cdn8.example.dot/img/image-35c3af8134.gif"

gulp-rev: 对目标文件进行MD5计算序列值,更改文件名,生成键值对json文件(manifest文件,如上)

gulp-rev-collector: 根据manifest文件的对应关系,替换目标文件内的引用链接,效果如下:

<link rel="stylesheet" href="http://static.guojiang.tv/mobile/css/income.css"/>替换后:<link rel="stylesheet" href="http://static.guojiang.tv/mobile/css/income-e25a4c9a0d.css"/>

但这种更改文件名的方式 容易导致发布后由于种种原因导致某些文件找不到的问题。

所以我们想更改为如下的方式:

"activity/channel/2.css": "activity/channel/2.css?v=4ddaaeae28""activity/christmas.css": "activity/christmas.css?v=2d21a0c7ca""activity/channel/1.jpg": "activity/channel/1.jpg?v=c8571d8112"

即在不更改文件名,在引用的文件名后加?v=hashVal的方式。

需要我们手动更改这两个插件的源代码,如下:

第一步:打开node_modules\gulp-rev\index.js 第144行

/*manifest[originalFile] = revisionedFile;*/manifest[originalFile] = originalFile + '?v=' + file.revHash;

第二步:打开nodemodules\gulp-rev\nodemodules\rev-path\index.js 第10行

/*return filename + '-' + hash + ext;*/return filename + ext;

第三步:打开node_modules\gulp-rev-collector\index.js 

第31行

/*if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {     isRev = 0; }*/ if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {     isRev = 0; }

第50行

/*return pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&"); */
var rp = pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");rp = pattern + "(\\?v=(\\d|[a-z]){8,10})*";return rp;

第90行

/*patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )              + opts.revSuffix              + escPathPattern( path.extname(key) )            );*/ patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )              + opts.revSuffix              + escPathPattern( path.extname(key) ) + "(\\?v=(\\d|[a-z]){8,10})*"            );

OK,这样就得到了如下的结果:

<img src="http://www.cnblogs.com//img/common/tuhao.png?v=ee283a76b9"><link rel="stylesheet" type="text/css" href="http://www.cnblogs.com//css/forum.css?v=bf5de1c040"><script type='text/javascript' src="http://www.cnblogs.com//js/component/flexible.js?v=e2afd4dade"></script>css中:background: url(/img/all.png?v=d69570864e) no-repeat;

 

可能出现的问题:

权限问题,建议删除node_modules文件夹,把gulp插件重新构建 

npm install

如果不行,看下是否是windows下的gulp操作虚拟机中的文件,如果是,尝试在虚拟机中重新安装node npm gulp然后运行试试。

 

 gulpfile.js 源码参考