通過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; }