使用gulp解决RequireJS项目前端缓存问题（二）

一、前言

这一节，咱们主要解决在上一节《使用gulp解决RequireJSs项目前端缓存问题（一）》末尾提到的几个问题：

1. 1. 对经过require-config.js引入的js文件修改后，没有更新到
   2. 每次gulp运行完后都会生成新的文件，开发环境是作了清除dist目录处理，但对于通常公司服务器而言，发布到生产环境上，不可能每次发布都对dist作清空处理，文件只会越积越多

先睹为快，猛戳连接下载Demo ：http://pan.baidu.com/s/1skDm2Up

 

二、修改require.js

按第一节中替换文件名的作法，要想在require-config.js中也能顺利替换的话，应该在requireJs参数path对应的路径文件加上后缀，以下图：

 

2.一、把项目根目录切换到src

运行html/index.html（注意为了调试方便，此时咱们用的js是非压缩版的require），这时控制台报错：

 

RequireJS已经默认跟每一个模块自动加上了后缀，查看官方说明，你会发现这句话：“RequireJS默认假定全部的依赖资源都是js脚本，所以无需在module ID上再加".js"后缀，RequireJS在进行module ID到path的解析时会自动补上后缀”。

在错误的地方断点调试：

 

 你会看到node.src的值就是RequireJS动态插入的值，先按下图红色框部分插入代码：

var srcArr = node.src.split('.js');
if(!!srcArr[1]){
    node.src=srcArr[0]+'.js'+srcArr[1]
}else{
    node.src=srcArr[0]+'.js'
}

 

大概意思就是若是有两个“.js”，就取一个；咱们最终要实现的是相似“.js?v=1.001”的格式，因此还要用srcArr[1]来保存参数。

修改完后，再刷新页面，出现了“Good！成功加载index.js”，则表示第一个问题顺利解决。

 

2.二、把项目根目录切换到dist

运行上一节讲到的五个gulp命令，运行html/index.html，查看控制台能够发现如今经过RequireJS引入的js也根据rev-manifest.json修改了引用：

至此，上一节遗留的第一点问题顺利解决。

 

三、修改gulp-rev和gulp-rev-collector

到如今为止，gulp都是经过每次生成新文件来解决缓存的，而咱们最终须要的是经过添加参数的方式来更新，解决这个问题，咱们须要修改点文件。

注意：package.json文件中的插件版本："gulp-rev": "~7.1.2"，"gulp-rev-collector": "~1.0.5"

修改1：

打开node_modules\gulp-rev\index.js，将第144行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;

 

 

　　修改2：

打开nodemodules\gulp-rev\nodemodules\rev-path\index.js，将10行 return filename + '-' + hash + ext;
更新为: return filename + ext;

 

修改3：

打开node_modules\gulp-rev-collector\index.js，将31行 if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !==  path.basename(key) ) {
更新为: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {

 

 

四、测试

 运行gulp的五个命令

 

看下其中一个rev-manifest.json：

 

 看下dist/html/index.html：

 

 再看下页面：

至此，第二点问题顺利解决。剩下的就是把修改过require.js压缩成min版本便可。

 

五、总结

总的来讲，咱们解决缓存问题采用的方式是经过修改参数来更新资源文件。

这两节内容核心就以下几个：

1. 经过gulp来生成须要替换的rev-manifest.json
2. 修改require.js源码，以支持RequireJS引入的文件也能带上参数
3. 修改gulp-rev和gulp-rev-collector，使得引用是以参数形式更新，而不是每次都是新文件更新

若是你们有任何问题，欢迎留言。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

本文原创，欢迎转载，转载请注明做者：飘飞的夏秋 和出处 http://www.cnblogs.com/chenchenghua/p/5956938.html