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并没有加,这根本不能用啊喂!

![ubiaoqing57c3df113178b16943.jpg](//upload-images.jianshu.io/upload_images/3360354-58497eb676a31f40.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

官方不支持,只好自己动手丰衣足食了,具体思路是通过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的:

![cocos-creator-default-md5.png](//upload-images.jianshu.io/upload_images/3360354-e598174ea67df47c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

可以看到,css和js都是没有打md5的,这个文件发到cdn会导致文件无法更新

执行gulp之后:

![cocos-creator-md5.png](//upload-images.jianshu.io/upload_images/3360354-dd0c308716381324.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

Cocos Creator—如何给资源打MD5版本号的更多相关文章

  1. Cocos Creator—最佳构建部署实践

    这篇文章主要是我们团队在使用Cocos Creator过程中的一些关于部署方面的实践总结,标题党了一回,严格来说,应该是<快看漫画游戏研发团队使用Cocos Creator构建部署最佳实践> ...

  2. Cocos Creator 资源加载流程剖析【四】——额外流程(MD5 PIPE)

    当我们将游戏构建发布到web平台时,勾选Md5 Cache选项可以开启MD5 Pipe,它的作用是给构建后的资源加上md5后缀,避免浏览器的缓存导致部分资源不是最新,因为使用了md5后缀后,当资源内容 ...

  3. Cocos Creator 资源加载流程剖析【一】——cc.loader与加载管线

    这系列文章会对Cocos Creator的资源加载和管理进行深入的剖析.主要包含以下内容: cc.loader与加载管线 Download部分 Load部分 额外流程(MD5 Pipe) 从编辑器到运 ...

  4. Cocos Creator 资源加载流程剖析【五】——从编辑器到运行时

    我们在编辑器中看到的资源,在构建之后会进行一些转化,本章将揭开Creator对资源进行的处理. 资源处理的整体规则 首先我们将Creator的开发和运行划分为以下几个场景: 编辑器 当我们将资源放到编 ...

  5. Cocos Creator 新资源管理系统剖析

    目录 1.资源与构建 1.1 creator资源文件基础 1.2 资源构建 1.2.1 图片.图集.自动图集 1.2.2 Prefab与场景 1.2.3 资源文件合并规则 2. 理解与使用 Asset ...

  6. Cocos Creator 资源加载流程剖析【二】——Download部分

    Download流程的处理由Downloader这个pipe负责(downloader.js),Downloader提供了各种资源的"下载"方式--即如何获取文件内容,有从网络获取 ...

  7. cocos creator入门

    前面的话 Cocos Creator 是一个完整的游戏开发解决方案,包括了 cocos2d-x 引擎的 JavaScript 实现,以及快速开发游戏所需要的各种图形界面工具.Cocos Creator ...

  8. Cocos Creator 通用框架设计 —— 资源管理优化

    接着<Cocos Creator 通用框架设计 -- 资源管理>聊聊资源管理框架后续的一些优化: 通过论坛和github的issue,收到了很多优化或bug的反馈,基本上抽空全部处理了,大 ...

  9. 触控的手牌—Cocos Creator

    科普 Cocos Creator是触控最新一代游戏工具链的名称.如果不太清楚的,可以先看一些新闻.   新编辑器Cocos Creator发布: 对不起我来晚了! http://ol.tgbus.co ...

随机推荐

  1. 如何开始使用 Java 机器学习

    开始Java机器学习的最好工具是什么? 这个问题已经有一段时间了,但最近这些日子几乎每个人都在谈论人工智能和机器学习.这已经不再是一个保留给科学家和研究者的秘密,而是几乎实现于每一项新兴技术中. 在下 ...

  2. Java 实现 HttpClients+jsoup,Jsoup,htmlunit,Headless Chrome 爬虫抓取数据

    最近整理一下手头上搞过的一些爬虫,有HttpClients+jsoup,Jsoup,htmlunit,HeadlessChrome 一,HttpClients+jsoup,这是第一代比较low,很快就 ...

  3. 12.app后端如何选择合适的数据库产品

    app后端的开发中,经常要面临的一个问题是:数据放在哪里? mysql ?redis?mongodb? 现在有这么多优秀的开源数据库产品,怎么根据业务场景来选择合适的数据? 常用的数据库产品的优缺点又 ...

  4. nginx 开启 停止 重启

    Nginx的启动.停止与重启 启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root@LinuxServer sbin]# /usr/local/nginx/sb ...

  5. Go 语言之三驾马车

    interface Go是一门面向接口编程的语言,interface的设计自然是重中之重.Go中对于interface设计的巧妙之处就在于空的interface可以被当作"Duck" ...

  6. disk.go

    package disk import "syscall" //空间使用结构体 type DiskStatus struct {     Size uint64     Used ...

  7. 深入理解Java:内省(Introspector)

    深入理解Java:内省(Introspector) 内省(Introspector) 是Java 语言对 JavaBean 类属性.事件的一种缺省处理方法. JavaBean是一种特殊的类,主要用于传 ...

  8. 第三方库API接口

    第三方库API接口 InfluxDB提供了各种语言的Http API接口的封装.具体可以看这里: https://docs.influxdata.com/influxdb/v0.10/clients/ ...

  9. 使用画圆的方法来标注指定Id的实体

    //entId为指定实体的Id void SignEnt(AcDbObjectId entId){ AcDbEntity *pEnt = NULL; AcDbBlockReference *pRef; ...

  10. BZOJ1854: [Scoi2010]游戏 二分图

    很早之前写的题了,发现没有更博,想了想,更一发出来. Orz ljss 这是冬令营上的例题...之后,我推出来了一种时间复杂度没有问题,空间复杂度没有问题的方法,额(⊙o⊙)…和给出的正解不同,但是能 ...