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

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

官方不支持,只好自己动手丰衣足食了,具体思路是通过gulp等构建工具实现。
gulp安装请访问:https://gulpjs.com/
nodejs安装请访问:http://nodejs.org/
另外需要安装gulp相关插件:gulp-rev 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文件代码:

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游戏开发工程师,如果你符合以下条件:

  1. 白鹭引擎/Cocos2d-js/Layabox等H5相关的开发经验
  2. 希望快速成长,不甘平庸

请联系我吧:babyzone2004@qq.com

3赞

666666 学习了

@nantas 出来看下这个问题,楼主说你的MD5方案不能用啊。

谢谢反馈,这个问题我们会尽快修复。

请问下楼主,为什么不用 gulp-rev-replace,而要用 gulp-rev-collector

从功能来说两者都是可以实现,用谁都一样。
如果要说理由,gulp-rev-collector版本稳定些,网上讨论的文章多些,有读者遇到配置问题,也可以自行搜索解决。

谢谢 1234,我后来改用 gulp-rev-all,因为存在资源相互依赖的情况,需要在依赖的资源 md5 改变后,更新引用的资源本身的 md5。

嗯,实际的情况会复杂一些,资源互相依赖需要把最末端的资源md5,然后在根据依赖递归回来处理。
类似这个讨论:https://github.com/fouber/blog/issues/5
没想到gulp也有插件实现了这个功能,赞

1赞

已经实现了,不过改动有点大,会延迟到 1.6.1 发布

1.6.1什么时候发布?

我又来了…… 请问下,如果有 cdn 的话,没办法防止 cdn 返回旧版本的 index.html 给客户端吧?(听说有的团队遇到 cdn 节点分发问题)那如果用户拿到旧的 index.html,要怎么保证能加载到最新的 md5 呢?难道要用户自己搭版本服务器?

html一般不会上cdn,如果html也上cdn,每次访问给url带个时间戳,强制回源

现在构建小米快游戏没有md5选项,无法监测更新,怎么处理啊,creator2.1.3版本,项目限制暂时不能升级,怎么解决