自动化的基于TypeScript的HTML5游戏开发

自动化的开发流程

在HTML5游戏开发或者说在Web客户端开发中，对项目代码进行修改之后，一般来说，需要手动刷新浏览器来查看代码修改后运行结果。这种手动的方式费时费力，降低了开发效率。另外，如果我们使用了如TypeScript这类需要通过转换器把代码转换成浏览器可识别的JavaScript代码的语言，在运行程序之前，我们还需要进行额外的手动转换，这同样是影响开发效率的一个因素。为了解决这两个问题，本文介绍了如何通过使用TypeScript Compiler(tsc)的watch模式来实现代码修改后自动编译以及使用gulp-connect来实现编译后浏览器自动刷新。

开发环境

• Visual Studo Code 1.15
• node v8.4.0
• npm 5.3.0

示例和源码

本文将通过一个完整的实例来讲解如何实现开发自动化，实例的源码托管在github。示例所采用的HTML5游戏引擎为LayaAir。目前已经在Windows和Mac OSX系统测试通过。这里是仓库链接。另外，示例项目是使用VS Code(Visual Studio Code)来开发的。我们常用的HTML5游戏集成开发环境Laya IDE以及Egret Wing等也是基于VS Code开发的，部分相关知识也可以借鉴。另外本文使用了AMD来管理项目的代码，关于如何在HTML5游戏中使用AMD请参考我的另一篇文章《借助AMD来解决HTML5游戏开发中的痛点》。

使用tsc的watch模式实现自动化编译

tsc天生就支持自动化编译和增量编译。在tsconfig.json中的compilerOptions属性中增加"wathc":true配置即可。这样我们执行命令tsc -p .的时候便可以使用这些特性了。

使用gulp和gulp-connect实现编译后浏览器自动刷新

gulp是一种基于