通过gulp为requireJs引入的模块添加版本号
Posted Hickey
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过gulp为requireJs引入的模块添加版本号相关的知识,希望对你有一定的参考价值。
由于项目用到requireJs,并且通过gulp来对项目进行统一的管理,为了防止浏览器对文件进行缓存,所以通过gulp为项目中的文件添加版本号。
1、分别安装gulp-rev、gulp-rev-collerctor
npm install --save-dev gulp-rev npm install --save-dev gulp-rev-collector
打包后的效果
"/css/style.css" => "/dist/css/style-1d87bebe.css" "/js/script1.js" => "/dist/script1-61e0be79.js"
预期效果
"/css/style.css" => "/dist/css/style.css?v=1d87bebe" "/js/script1.js" => "/dist/script1.js?v=61e0be79"
2、打开node_modules\\gulp-rev\\index.js
//第144行 manifest[originalFile] = revisionedFile; //改为 manifest[originalFile] = originalFile + \'?v=\' + file.revHash;
3、打开node_modules\\rev-path\\index.js
//第10行 return filename + \'-\' + hash + ext; //改为 return filename + ext;
4.打开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 ( path.basename(json[key]).split(\'?\')[0] !== path.basename(key) ) { isRev = 0; }
5.gulp生成版本号并替换html,css,js文件中的文件引入路径(网上教程很多,这里不多说上连接)
http://www.tuicool.com/articles/UbaqyyJ
http://www.cnblogs.com/givebest/p/4707432.html
6.引入路径注意事项
各个文件中的路径必须和修改版本号的json文件中的根路径必须一致(包括require.config.paths 路径),这样gulp才可以替换掉
//json文件 { "app/css/demo.css":"app/css/demo.css?v=768b6e5d87", "app/js/demo.js":"app/js/demo.js?v=09521ddbe3", "app/js/a.js":"app/js/a.js?v=59dd7446a0" }
<!--require的入口文件必须写完整路径--> <script src="../lib/requires/requires.js" data-main="js/a"></script> <!--改为--> <script src="../lib/requires/requires.js" data-main="../app/js/a.js"></script> <!--输出--> <script src="../lib/requires/requires.js" data-main="../app/js/a.js?v=59dd7446a0"></script>
require.config.paths
paths:{ "demo":"../app/js/demo" } //改为 paths:{ "demo":"../app/js/demo.js" } //输出配置文件后 paths:{ "demo":"../app/js/demo.js?v=09521ddbe3" }
7.修改require.js 源码解决引入路径中含有search值得路径报错问题(版本 "1.0.8")
修改resume 函数 在1169行后添加
//修改resume 函数 在1169行后添加 if( url.indexOf(\'?v=\') !== -1 ){ if( /\\.js$/.test(url) ){ url = url.slice(0,-3); } } if( /\\.js\\.js$/.test(url) ){ url = url.slice(0,-3); }
//修改nameToUrl函数 在 moduleName 赋值( 1488行)后添加 var recordUrl = \'\'; if( moduleName.indexOf(\'.js?\') > -1 ){ recordUrl = moduleName.slice(moduleName.indexOf(\'?\')); moduleName = moduleName.slice(0,moduleName.indexOf(\'.js\')); } //在生成文件路径后 (typeof config.urlArgs === \'string\' 判断之前) 修改路径地址 url = url + recordUrl; if (!config.urlArgs) { return url; }
以上是关于通过gulp为requireJs引入的模块添加版本号的主要内容,如果未能解决你的问题,请参考以下文章