自动化的基于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是一种基于nodejs的自动化构建工具,它可以增强我们的工作流程。gulp-connect是gulp的一个插件,主要提供web服务器和自动化浏览器刷新功能。在本文的参考资料列表中可以查看更多的关于gulp和gulp-connect的信息。下面我讲详细讲解自动化流程的创建。
安装
gulp是基于nodejs,所以首先要安装nodejs环境,具体安装过程以及nodejs相关知识我们可以参考nodejs官方网站。
nodejs安装完毕之后,需要初始化项目:
npm init
接着,通过执行命令来全局安装 gulp和tsc:
npm install -g gulp typescript
下面安装开发依赖
npm install --save-dev gulp gulp-connect
创建gulpfile.js
在项目根目录下创建一个名为gulpfile.js
的文件,我们的自动化流程逻辑全部在这里。
首先我们要创建一个web server,因为gulp-connect
使用WebSocket和浏览器进行通信,所以这是实现浏览器自动刷新的必要条件。我们来创建一个connect
任务以实现这个功能。web server的默认端口为8080。
gulp.task('connect', () =>
connect.server({
root: './bin',
livereload: true
})
);
下面我们创建一个watch
任务来实现对编译文件的内容变化的监听,当检测到变化之后则执行一个名为reload
的任务。reload
任务负责通知浏览器对当前的html页面进行刷新。
gulp.task('reload', () => {
return gulp.src('./bin/*.html')
.pipe(connect.reload());
});
gulp.task('watch', () => {
gulp.watch(['./bin/js/*.js'], ['reload']);
});
为了自动化执行编译命令tsc
,我们创建一个compile
任务来完成这件事。
gulp.task('compile', () => {
const cmd = os.platform() == 'win32' ? 'tsc.cmd' : 'tsc';
const childProcess = require('child_process');
const child = childProcess.spawn(cmd, []);
child.stdout.on('data', function (chunk) {
console.log('[tsc]', chunk + '');
});
child.stderr.on('data', function (chunk) {
console.log('[tsc]', chunk);
});
child.on('exit', function (code, signal) {
console.log('[tsc]', chunk);
});
return child;
});
当ts文件发生变化的时候,我们可以在控制台的日志中看到tsc
的自动化编译的工作过程。
最后创建default
任务,以触发其他所有任务的执行。
gulp.task('default', ['connect', 'watch', 'compile']);
配置VS Code
我们需要安装VS Code插件Debugger for Chrome,以实现使用Chrome在VS Code中调试运行代码。
接着,我们可以按下F5
,并选择chrome
来自动生成调试配置launch.json
,此文件位于.vscode
文件夹。
下面,按下F1
,并输入Configure Default Build Task
来快速找到配置默认生成任务
选项,选择之后弹出任务列表
,在列表中选中gulp:default
之后,task.json
文件会自动生成,并置于.vscode
文件夹。task.json
使得我们可以把gulp:default
作为默认的构建任务。
至此,所有的配置和编程处理完毕。
开启自动化的开发之旅
按下快捷键Ctrl+Shift+B
或者在终端中执行gulp
来触发gulp:default
:
- 创建一个web服务器
- 执行tsc,在ts文件发生变化之后自动编译
- 监听编译文件的变化,文件变化之后会通知浏览器刷新
接下来,我们可以在浏览器中输入http://localhost:8080
来运行游戏。
然后修改示例中的Greeting.ts
文件,把Hello LayaAir
修改为Hello HTML5 Game.
,保存文件之后,便会发现游戏中的显示文本修改为Hello HTML5 Game.
. 具体请看下面的动图。
如有其他的配置疑问,请参考示例项目的源码。
参考
自动化的基于TypeScript的HTML5游戏开发的更多相关文章
- TypeScript的HTML5游戏
wildfirecode 自动化的基于TypeScript的HTML5游戏开发 自动化的开发流程 在HTML5游戏开发或者说在Web客户端开发中,对项目代码进行修改之后,一般来说,需要手动刷新浏览器来 ...
- 借助AMD来解决HTML5游戏开发中的痛点
借助AMD来解决HTML5游戏开发中的痛点 游戏开发的痛点 现在,基于国内流行引擎(LayaAir和Egret)和TypeScript的HTML5游戏开发有诸多痛点: 未采用TypeScript编译器 ...
- 在基于TypeScript的LayaAir HTML5游戏开发中使用AMD
在基于TypeScript的LayaAir HTML5游戏开发中使用AMD AMD AMD是"Asynchronous Module Definition"的缩写,意思就是&quo ...
- Egret是一套完整的HTML5游戏开发解决方案
Egret是一套完整的HTML5游戏开发解决方案.Egret中包含多个工具以及项目.Egret Engine是一个基于TypeScript语言开发的HTML5游戏引擎,该项目在BSD许可证下发布.使用 ...
- CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎
CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5 2D 渲染引擎,可以用于游戏开发.它是开源的,跨平台的,与现代的浏览器和移动设备兼容.CutJS 提供了一个类似 DOM 树的 ...
- 优秀工具推荐:两款很棒的 HTML5 游戏开发工具
HTML5 众多强大特性让我们不需要多么高深技术就能创建好玩的网页游戏,同时证明了开放的 Web 技术能与任何其他在游戏开发中使用的技术竞争.正如标题所说,这篇文章推荐的几款很棒 HTML5 游戏开发 ...
- HTML5游戏开发引擎,初识CreateJS
CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎.打造 HTML5 游戏,构建新游戏,提供构建最新 HTML5 的技术.你可以通过这个网站学习如何构建跨平台和跨终端游戏.这 ...
- HTML5游戏开发进阶指南(亚马逊5星畅销书,教你用HTML5和JavaScript构建游戏!)
HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...
- HTML5游戏开发技术基础整理
随着HTML5标准终于敲定.HTML5将有望成为游戏开发领域的的热门平台. HTML5游戏能够执行于包含iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是眼下跨平台应用开发的最佳实 ...
随机推荐
- spring boot 配置文件application
场景:在项目部署的过程中,对于spring boot的配置文件一直不很了解,直到项目出现一个莫名其妙的问题——工程classes中的配置文件被覆盖,程序启动总是报错! 1 配置文件的优先级 appl ...
- 浅谈lvs和nginx的一些优点和缺点
借鉴一些网上资料整理了简单的比较: LVS的负载能力强,因为其工作方式逻辑非常简单,仅进行请求分发,而且工作在网络的第4层,没有流量,所以其效率不需要有过多的忧虑. LVS基本能支持所有应用,因为工作 ...
- 7.spark共享变量
spark共享变量 1 Why Apache Spark 2 关于Apache Spark 3 如何安装Apache Spark 4 Apache Spark的工作原理 5 spark弹性分布式数据集 ...
- 14. leetcode 383. Ransom Note
Given an arbitrary ransom note string and another string containing letters from all the magazines, ...
- Dubbo实战快速入门 (转)
Dubbo是什么? Dubbo[]是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案. 其核心部分包含: 远程通讯: 提供对多种基于长连接的NIO框架抽象封 ...
- laravel框架cookie应用到中间件的理解
昨天博主接到一个委托的需求,大数据同事想要在请求日志抓取数据,希望在我的每个页面进行cookie的种植,方便他们进行定位分析,我思考了一下,简单呀,首先考虑的是通过中间件进行cookie种植,但是随后 ...
- 模拟实现C库的atoi、atof和itoa
1.C函数atoi atoi (表示 alphanumeric to integer)是把字符串转换成整型数的一个函数.广泛的应用在计算机程序和办公软件中.atoi( ) 函数会扫描参数 nptr字符 ...
- Asp.net中,从弹出窗体取选择值(转)
在Asp.net中,从A页面中弹出B页面,在B页面中选择数据后,关闭并将数据更新到A页面,是一种常用 的方式.只是我对Javascript不熟悉,所以捣鼓了一下午,终于有了一点成绩:测试项目有两个页面 ...
- 136. Single Number【LeetCode】异或运算符,算法,java
Given an array of integers, every element appears twice except for one. Find that single one. Note:Y ...
- [BZOJ 3629][ JLOI2014 ]聪明的燕姿
这道题考试选择打表,完美爆零.. 算数基本定理: 任何一个大于1的自然数N,都可以唯一分解成有限个质数的乘积N=P₁^a₁ P₂^a₂…Pn^an,这里P₁<P₂<…<Pn均为质数, ...