利用gulp添加.js?v=738575这种类型的版本号

**利用gulp添加.js?v=738575这种类型的版本号
1。登录nodejs官网(http://nodejs.org/),下载安装常用版本即可,直接点击下一步就可以安装成功。
2。安装完成后用cmd测试是否安装成功。在cmd下输入node -v 以及npm -v,若出现版本号则安装成功。之后cd 工程目录,npm init,之后输入文件配置,没有的可以不写,生成package.json文件。
3。利用npm在工程目录下打开cmd输入如下命令安装下列插件:
npm install –save-dev gulp
npm install –save-dev gulp-rev
npm install –save-dev gulp-rev-collector
npm install –save-dev gulp-clean
npm install –save-dev run-sequence
4.打开node_modules\gulp-rev\index.js,找到下面的代码,将注释掉的改为下面的内容,此处为改变返回的版本号格式。
/manifest[originalFile] = revisionedFile;/
manifest[originalFile] = originalFile + ‘?v=’ + file.revHash;
5.打开node_modules\rev-path\index.js ,若没有此目录,则打开rev-collector中的index.js文件进行修改。
/return filename + ‘-’ + hash + ext;/
return filename + ext;
也可采取将程序中的遍历循环注释掉的方式。。。
就是让返回的版本号格式中js前不包含hash值,不同版本的rev-collector修改方式不同,但只要达成目的即可。
6.打开打开node_modules\gulp-rev-collector\index.js
//return pattern.replace(/[-[]{}()*+\?.\^$|\/\]/g, “$&”);
//禁止重复添加版本号
var rp = pattern.replace(/[-[]{}()*+\?.\^$|\/\]/g, “$&”);
rp = pattern + “(\?v=(\d|[a-z]){8,10})*”;
return rp;
7.在工程根目录下建立gulpfile.js,文件内容具体看附件。
在cmd中执行gulp,便可看到效果,若仍没有效果,可尝试多加两个操作,对gulp-rev-collector中的文件再次修改
(1)/*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;
}
(2)/*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})*”
);
8.gulpfile.js 具体程序如下:(可实现多个文件夹中的html页面都加上版本号)
这里写图片描述
这里写图片描述
注:
***1.在css js任务中可通过数组的方式,将多个文件夹中的js,css文件作为输入源。
2.在rev任务中src中的json文件后是需要添加版本号的html页面,尝试后发现可输入多个。*
9.如果此工程打包到其他计算机中使用时,只要cmd中到当前工程目录下,输入gulp既可。(在package.json文件中包含需要的所有依赖的情况下)
如果在c盘创建的工程,需要将工程复制到c盘,不然没有权限。

猜你喜欢

转载自blog.csdn.net/u012516440/article/details/77649251