Cocos Creator—如何給資源打MD5版本號

lk20150415 發布于2019-08-20 18:23 / 1087人閱讀

摘要：從年底開發組就說要支持，等了大半年，新的內測版本終于增加了的功能，但效果也是差強人意。實際上我不會把這幾個和打版本號的。最后產出會把這幾個文件合并到中。

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 gulp-rev-collector

思路如下：

把build/web-mobile/src里面的project.js拷貝到build/web-mobile/，目的是為了匹配main.js里的‘project.js’

通過gulp-rev給js和png圖片打md5版本號

通過gulp-rev-collector替換文件原路徑到打版本號的路徑

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資源文件打版本號
  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，這個示例包含了Cocos Creator圖片壓縮優化，減少首次文件請求，html壓縮，動態更新定制loading圖等功能哦。

ps：

我們團隊正在招聘優秀的H5游戲開發工程師，如果你符合以下條件：

白鷺引擎/Cocos2d-js/Layabox等H5相關的開發經驗

希望快速成長，不甘平庸

請聯系我吧：babyzone2004@qq.com

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84445.html

Cocos Creator—最佳構建部署實踐

摘要：本篇我們會基于的官方示例做分析，我在原的基礎上增加了部署的腳本，部署到又拍云和騰訊云。文件資源增加版本號版本號的方案跟之前的文章基本一致，這個流程在版本應該可以忽略了。這篇文章主要是我們團隊在使用Cocos Creator過程中的一些關于部署方面的實踐總結，標題黨了一回，嚴格來說，應該是《快看漫畫游戲研發團隊使用Cocos Creator構建部署最佳實踐》，對于其他團隊可能并不是。 ...

caohaoyu 2019-08-22 13:41 評論0 收藏0
小游戲開發上手體驗 - Cocos Creator

摘要：但開發的游戲是無法通過網頁發給別人在線玩的，更不能做成微信小游戲。它使用作為開發語言，開發出的游戲可以直接生成微信小游戲網頁安卓等平臺上的版本。微信群里最大的騷擾源有兩種：一是轉發#吱口令#~！@#￥%……&*，長按復制此消息領紅包之類的另一種就是各種小程序和小游戲的分享前天有同學無意間把一個小游戲分享到了答疑群中，我看了一下，其實游戲的代碼邏輯并不復雜（簡化版的跳一跳，套上個...

zhiwei 2019-07-31 11:18 評論0 收藏0
無聊嗎，寫個【飛機大戰】來玩吧

摘要：今天杭州又是大雨，被淋了個落湯雞，都怪我家大狼狗非要騎電動車，我昨天吐槽要買的帥氣的雨衣還沒有買不過大雨和飛機大戰小游戲更配哦。微信早已正式發布微信內置飛機大戰游戲，目前該游戲已經下線。此時，界面中會顯示此次玩家的飛機大戰分數。今天杭州又是大雨，被淋了個落湯雞，都怪我家大狼狗非要騎電動車，我昨天吐槽要買的帥氣的雨衣還沒有買,不過大雨和飛機大戰小游戲更配哦。這篇文章來自我司的王老吉同...

MSchumi 2019-08-26 13:48 評論0 收藏0
無聊嗎，寫個【飛機大戰】來玩吧

摘要：今天杭州又是大雨，被淋了個落湯雞，都怪我家大狼狗非要騎電動車，我昨天吐槽要買的帥氣的雨衣還沒有買不過大雨和飛機大戰小游戲更配哦。微信早已正式發布微信內置飛機大戰游戲，目前該游戲已經下線。此時，界面中會顯示此次玩家的飛機大戰分數。showImg(https://user-gold-cdn.xitu.io/2019/5/15/16ab9377884b99f7); 今天杭州又是大雨，被淋了個落湯雞...

李濤 2019-05-23 17:27 評論0 收藏0