Cocos Creator 是Cocos最新一代的游戲開(kāi)發(fā)者工具，基于 Cocos2d-x，組件化诫钓，腳本化，數(shù)據(jù)驅(qū)動(dòng)篙螟，跨平臺(tái)發(fā)布菌湃。Cocos Creator的開(kāi)發(fā)思路已經(jīng)逐步跟Unity 3D靠攏，寫(xiě)起來(lái)也更方便快捷遍略，開(kāi)發(fā)效率更高惧所。
但既然是新東西，免不了各種坑绪杏。其中在發(fā)布Web Mobile平臺(tái)上下愈，就有各種小問(wèn)題，例如給資源加上md5版本號(hào)蕾久，Cocos Creator就不支持势似。從16年底開(kāi)發(fā)組就說(shuō)要支持MD5 Cache，等了大半年，新的1.6內(nèi)測(cè)版本終于增加了MD5 Cache的功能履因，但效果也是差強(qiáng)人意障簿。
為什么呢？因?yàn)檎?lái)說(shuō)栅迄，一般頁(yè)面除了首頁(yè)的index.html站故，其他資源都是要添加md5版本號(hào)的，1.6內(nèi)測(cè)版確實(shí)增加了版本號(hào)霞篡，但只給圖片等資源做了md5世蔗，cocos2d-js-min.js端逼，main.js并沒(méi)有加朗兵，這根本不能用啊喂！
官方不支持顶滩，只好自己動(dòng)手豐衣足食了余掖，具體思路是通過(guò)gulp等構(gòu)建工具實(shí)現(xiàn)。
gulp安裝請(qǐng)?jiān)L問(wèn)：https://gulpjs.com/
nodejs安裝請(qǐng)?jiān)L問(wèn)：http://nodejs.org/
另外需要安裝gulp相關(guān)插件：gulp-rev gulp-rev-collector
思路如下：
- 把build/web-mobile/src里面的project.js拷貝到build/web-mobile/礁鲁，目的是為了匹配main.js里的‘project.js’
- 通過(guò)gulp-rev給js和png圖片打md5版本號(hào)
- 通過(guò)gulp-rev-collector替換文件原路徑到打版本號(hào)的路徑
gulpfile文件代碼：
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資源文件打版本號(hào)
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/'));
});
在命令行里面執(zhí)行gulp就可以給相應(yīng)的文件打版本號(hào)啦盐欺！
對(duì)比前后的版本打包情況，執(zhí)行之前仅醇，除了圖片冗美，js和css還是沒(méi)有加md5的：
可以看到，css和js都是沒(méi)有打md5的析二，這個(gè)文件發(fā)到cdn會(huì)導(dǎo)致文件無(wú)法更新
執(zhí)行g(shù)ulp之后：
js和css已經(jīng)打上版本號(hào)粉洼。
細(xì)心的開(kāi)發(fā)者可能看到project.js和圖片沒(méi)有打md5。這里由于是提供思路叶摄，所以不把所有的功能完善属韧，有興趣的讀者可以自己完善。實(shí)際上我不會(huì)把這幾個(gè)js和css打版本號(hào)的蛤吓。最后產(chǎn)出會(huì)把這幾個(gè)文件合并到index.html中宵喂。
完整代碼可以訪問(wèn)：https://github.com/babyzone2004/cocosMd5，這個(gè)示例包含了Cocos Creator圖片壓縮優(yōu)化会傲，減少首次文件請(qǐng)求锅棕，html壓縮，動(dòng)態(tài)更新定制loading圖等功能哦淌山。
ps：
我們團(tuán)隊(duì)正在招聘優(yōu)秀的H5游戲開(kāi)發(fā)工程師裸燎，如果你符合以下條件：
- 白鷺引擎/Cocos2d-js/Layabox等H5相關(guān)的開(kāi)發(fā)經(jīng)驗(yàn)
- 希望快速成長(zhǎng)，不甘平庸
請(qǐng)聯(lián)系我吧：babyzone2004@qq.com
