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

lk20150415 发布于2019-08-20 18:23 / 1084人阅读

摘要：从年底开发组就说要支持，等了大半年，新的内测版本终于增加了的功能，但效果也是差强人意。实际上我不会把这几个和打版本号的。最后产出会把这几个文件合并到中。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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