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. xcode6.1 设置中文输入

    XCode6.1中设置中文输入方法:Product->scheme->Edit Scheme->Options->Application Region->中国 ios 模 ...

  2. ansj人名识别

    1.前言 ansj人名识别会用到两个字典,分别是:person/asian_name_freq.data.person/person.dic. 1.1.asian_name_freq.data 这是一 ...

  3. Java 并行与并发

    Java 并行与并发 注意两个词:并行(Concurrent) 并发(Parallel) 并行:是逻辑上同时发生,指在某一个时间内同时运行多个程序 并发:是物理上同时发生,指在某一个时间点同时运行多个 ...

  4. ZooKeeper入门搭建教程

    http://www.wxdl.cn/cloud/zookeeper-build.html 本文是ZooKeeper的快速搭建,旨在帮助大家以最快的速度完成一个ZK集群的搭建,以便开展其它工作.本方不 ...

  5. Apache启动不了httpd: apr_sockaddr_info_get() failed xgp

    httpd: apr_sockaddr_info_get() failed for hoteel httpd: Could not reliably determine the server's fu ...

  6. 根据NABCD原则完成的案例项目需求分析及其创新方法

    <well> Need:在当下的知识经济时代,社会效率在提升,社会竞争强度也在增大,现代社会对人的素质提出了更高的要求,这导致了越来越多的人心理压力增大.well产品就是为了缓解人们心理压 ...

  7. BZOJ_1875_[SDOI2009]HH去散步_矩阵乘法

    BZOJ_1875_[SDOI2009]HH去散步_矩阵乘法 Description HH有个一成不变的习惯,喜欢饭后百步走.所谓百步走,就是散步,就是在一定的时间 内,走过一定的距离. 但 是同时H ...

  8. [SDOI2011]染色 BZOJ2243 树链剖分+线段树

    分析: 区间合并,lcol是左端点的颜色编号,rcol是右端点的颜色编号,那么我们向上合并的时候,如果左儿子的rcol等于右儿子的lcol那么区间的sum--. 另外,如果重链顶的颜色等于重链顶的父节 ...

  9. DNS Server Centos 7

    1.安裝服務 #yum update –y #yum install bind –y #systemctl  start named             開啟服務named #systemctl ...

  10. laravel 查询数据返回的结果

    laravel查询数据返回的结果 在插入数据库的时候,发现查询数据返回的结果是一个对象;即使是空数据 返回的不是true或者false 那么要判断该结果是否查询有结果 该如果呢? 学习源头: http ...