Cocos Creator—最佳构建部署实践

这篇文章主要是我们团队在使用Cocos Creator过程中的一些关于部署方面的实践总结，标题党了一回，严格来说，应该是**《快看漫画游戏研发团队使用Cocos Creator构建部署最佳实践》**，对于其他团队可能并不是。

之所以写这篇文章，一是我刚开始接触Cocos Creator的时候，发现构建部署方面的一些问题，针对性写了3篇优化的方案，随着对Cocos Creator了解的深入，我发现了一些更好的替代方法，二是因为我们团队随着业务发展，又到了缺人的时候，出来刷刷脸，发点招聘广告：Cocos Creator工程师快到碗里来。

不过你不用担心，本文不会只是炒炒冷饭，这次涉及的内容覆盖了构建部署的整个环节，如果你刚好把代码写好了，你应该看看本文，它会告诉你怎么把你的代码漂亮的部署到线上，并且这里涉及的代码你都可以通过github查看。涉及知识点如下：

1. 如何自定义loading页面
2. 图片部署自动化压缩优化
3. 减少loading页面出现之前的白屏时间
4. 代码混淆与保护
5. 文件资源增加md5版本号
6. cdn缓存

由于我们游戏采用的是1.6版本，所以还保留了md5版本号的优化，新的1.7版本已经比较完美支持md5的功能，但由于没有在实践中使用，所以还是基于1.6版本做一次总结，本质是一样的。

本篇我们会基于Cocos Creator的官方示例做分析，我在原demo的基础上增加了部署的脚本，部署到又拍云和腾讯云。为了展示自定义loading页面的功能，我把这个游戏的loading页面改了，如果有问题，麻烦官方联系我下架。

1. 如何自定义loading页面

这个需求官方其实是有提供解决方案的，官方文档-“定制项目构建模板”的功能就可以实现这个需求，可能是文档描述得不太清楚，我当时并没有把这个功能跟“自定义加载首页”联系起来。

由于这个构建模板功能，我们就可以不用gulp插件轻松实现自定义首页HTML,CSS,JS的功能了。怎么实现可以访问本文的项目地址查看。

自定义loading页面效果：

2. 图片部署自动化压缩优化

通过gulp工具，在部署之前自动化处理一遍图片压缩流程，在无损压缩的情况下，既能保证图片的输出质量还能减少体积。有团队会手动采用tinypng或者其他压缩工具提前压缩，这样做也是可以的，但流程不好把控，原则上能自动化处理的尽量让机器来做，人是会累的但机器不会，也不会出错。

var imagemin = require("gulp-imagemin");
gulp.task("imagemin", function (cb) {
    gulp.src(["./build/web-mobile/**/*.png"])
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5})
        ]))
        .pipe(gulp.dest("./build/web-mobile/"))
        .on("end", cb);
});`

3. 减少loading页面出现之前的白屏时间

通过gulp-htmlmin插件，把首屏的js，css文件合并到首页html文件，能有效减少网络