Cocos Creator—如何给资源打MD5版本号

Cocos Creator 是Cocos最新一代的游戏开发者工具，基于 Cocos2d-x，组件化，脚本化，数据驱动，跨平台发布。Cocos Creator的开发思路已经逐步跟Unity 3D靠拢，写起来也更方便快捷，开发效率更高。

但既然是新东西，免不了各类坑。其中在发布Web Mobile平台上，就有各类小问题，例如给资源加上md5版本号，Cocos Creator就不支持。从16年末开发组就说要支持MD5 Cache，等了大半年，新的1.6内测版本终于增长了MD5 Cache的功能，但效果也是差强人意。

为何呢？由于正常来讲，通常页面除了首页的index.html，其余资源都是要添加md5版本号的，1.6内测版确实增长了版本号，但只给图片等资源作了md5，cocos2d-js-min.js，main.js并无加，这根本不能用啊喂！


 

官方不支持，只好本身动手丰衣足食了，具体思路是经过gulp等构建工具实现。
gulp安装请访问：https://gulpjs.com/
nodejs安装请访问：http://nodejs.org/
另外须要安装gulp相关插件：[gulp-rev](https://github.com/sindresorhus/gulp-rev) [gulp-rev-collector](https://github.com/shonny-ua/gulp-rev-collector)

思路以下：

1. 把build/web-mobile/src里面的project.js拷贝到build/web-mobile/，目的是为了匹配main.js里的‘project.js’
2. 经过gulp-rev给js和png图片打md5版本号
3. 经过gulp-rev-collector替换文件原路径到打版本号的路径

gulpfile文件代码：

```javascript
var gulp = require('gulp');
var fileInline = require('gulp-file-inline');
var concat = require('gulp-concat');
var htmlmin = require('gulp-htmlmin');
var rev = require('gulp-rev');
const imagemin = require('gulp-imagemin');
var revCollector = require('gulp-rev-collector');

gulp.task('resRev', function (cb) {
// res, thm资源文件打版本号
gulp.src(['./build/web-mobile/**/*.js', './build/web-mobile/*.png', './build/web-mobile/**/*.css'])
.pipe(rev())
.pipe(gulp.dest('./build/web-mobile/'))
.pipe(rev.manifest())
.pipe(gulp.dest('./build/web-mobile/')
.on('end', cb));
});
gulp.task('default',['resRev'], function(cb) {
gulp.src(['./build/web-mobile/*.json', './build/web-mobile/index.html'])
.pipe(revCollector())
.pipe(gulp.dest('./build/web-mobile/'));
gulp.src(['./build/web-mobile/*.json', './build/web-mobile/main*.js'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest('./build/web-mobile/'));
});
```

在命令行里面执行`gulp`就能够给相应的文件打版本号啦！

对比先后的版本打包状况，执行以前，除了图片，js和css仍是没有加md5的：


能够看到，css和js都是没有打md5的，这个文件发到cdn会致使文件没法更新

执行gulp以后：


js和css已经打上版本号。

细心的开发者可能看到project.js和图片没有打md5。这里因为是提供思路，因此不把全部的功能完善，有兴趣的读者能够本身完善。实际上我不会把这几个js和css打版本号的。最后产出会把这几个文件合并到index.html中。

完整代码能够访问：[https://github.com/babyzone2004/cocosMd5](https://github.com/babyzone2004/cocosMd5)，这个示例包含了Cocos Creator图片压缩优化，减小首次文件请求，html压缩，动态更新定制loading图等功能哦。

 

ps：

咱们团队正在招聘优秀的H5游戏开发工程师，若是你符合如下条件：

1. 白鹭引擎/Cocos2d-js/Layabox等H5相关的开发经验
2. 但愿快速成长，不甘平庸

请联系我吧：babyzone2004@qq.com

[1]: /img/bVRYqr [2]: /img/bVRYq6