β

通过Grunt实现Egret自动编译

Govo 360 阅读
通过Grunt实现Egret自动编译 Egret采用TypeScript作为编程语言,同时结合exml作为皮肤组件,在这两者结合下让开发变得十分便利,特别是TypeScript相比纯JS,逻辑更清晰,更适合编写大型应用,唯一的麻烦是需要编译——TypeScript编译为JS,exml也是编辑为JS。但与大多需要编译的语言一样,都可以通过自动编译来提高开发效率。 在这里,我介绍使用GruntJS自动编译的方法,这也是在我项目中正在使用的方法,自此变得便利。 优点 官方有使用WebStorm自动编译的方法,但使用Grunt后,我们将减少编辑器的依赖,虽然我也使用PhpStorm作为编辑器,但好处是让这个编辑器做更少的事,减少编辑器的卡顿,同时提高可控性。 缺点 无法在编辑器里调试。但我认为这不影响,因为首先用WebStorm调试容易让它变得卡顿,再者Chrome有很好的调试台可以断点和监听变量,只要在编译时加入source map即可。 原理 使用Grunt的watch功能,监听TypeScript及exml文件的变化,当发生变化时立即调用egret命令进行编译。 什么是Grunt,安装Grunt Grunt是前端自动化工具,可以处理CSS、JS压缩,语法排错,混淆等工作,社区内有丰富的插件。 一个快速简单的入门地址:http://www.gruntjs.net/getting-started 需要先安装NodeJS,使用Egret的同学应该都有安装了,所以略过。 安装Grunt: [crayon-5652a05f6d9af812004478/] 在Egret中使用Grunt 第1步,package.json以及 npm install 在Egret项目根目录中新建一个package.json文件,为方便伸手党,内容如下: [crayon-5652a05f6da0b288822723/] 简单解释一下这个文件的内容,主要是讲解devDependencies内的,只用到3个组件: grunt 组件,核心组件 watch 组件,用于监听文件修改 shell 组件,用于执行egret编译命令 注:这个文件与egretProperties.json所有目录同级。 保存后,在当前目录打开命令行,Mac中为终端,输入以下命令: [crayon-5652a05f6da1a944298513/] 等它从网上下载这3个组件,安装,Grunt安装完成。 第2步,配置Gruntfile.js 同样在package.json所在目录,新建Gruntfile.js,输入内容如下: [crayon-5652a05f6da26080233794/] 我们重点关注watch中的files配置,一定要把skins下的ts排除掉,否则会进入监听死循环,同时,你的exml皮肤也不要放到skins以外。 另外要关注的是,我们执行的shell命令为: [crayon-5652a05f6da35924612908/] 这里加了 -sourcemap,可以把源码的影射map编译进去,只有这样,Chrome中才可以进行断点调试。如果没有这个-sourcemap,你在Chrome中只能看到一堆乱糟糟的编译后的JS。 这个文件已经配置好而且在项目中运行得很好,如无特别可以直接使用。 至此,Grunt配置完成。 开启自动编译 继续在上面命令行或终端中,保持当前目录,执行: [crayon-5652a05f6da47751394571/] 前面没错误的话,会看到以下结果: [crayon-5652a05f6da54121253073/] 嗯,已经开始最监听了,只要修改ts或exml文件,就会自动编译,例如修改了Main.ts [crayon-5652a05f6da60135037589/] 如果你使用WebStorm8,还可以在WebStorm里执行Grunt,这样好处是可以更直观地看到编译情况,在Mac中还会弹出编译结果提示,不用切换出去提,同时也减少了WebStorm的资源占用。 不过这里还有一个缺点,就是只要文件有任何改动,例如加一个空白,都会视为修改。目前我没有精力去找解决办法,欢迎各路英雄提出解决方法。 到此,在Egret中使用Grunt实现自动编译介绍完毕,感谢观看,也欢迎提高宝贵意见。
作者:Govo
Technique & Anything
原文地址:通过Grunt实现Egret自动编译, 感谢原作者分享。