码迷,mamicode.com
首页 > Web开发 > 详细

通过gulp为requireJs引入的模块添加版本号

时间:2016-12-28 17:35:33      阅读:309      评论:0      收藏:0      [点我收藏+]

标签:code   url   赋值   问题   ext   article   key   pat   arc   

由于项目用到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‘));
}


//在生成文件路径后 (config.urlArgs判断之前) 修改路径地址

url = url + recordUrl;

if (!config.urlArgs) {
    return url;
}

  

 

通过gulp为requireJs引入的模块添加版本号

标签:code   url   赋值   问题   ext   article   key   pat   arc   

原文地址:http://www.cnblogs.com/shihao905/p/6229644.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!