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