Egret社区

通过Grunt实现Egret自动编译

2015-5-13 01:02
29616
本帖最后由 govo 于 2015-5-22 10:49 编辑

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](http://www.gruntjs.net/getting-started)

需要先安装NodeJS,使用Egret的同学应该都有安装了,所以略过。
安装Grunt:

[mw_shl_code=applescript,true]npm install -g grunt-cli[/mw_shl_code]

在Egret中使用Grunt

第1步,package.json以及 npm install
在Egret项目根目录中新建一个package.json文件,为方便伸手党,内容如下:

[mw_shl_code=applescript,true]        {
          "name": "YourProjectName",
          "version": "0.1.0",
          "devDependencies": {
            "grunt": "~0.4.1",
            "grunt-contrib-watch": "^0.6.1",
            "grunt-shell": "^1.1.2"
          }
        }[/mw_shl_code]


简单解释一下这个文件的内容,主要是讲解devDependencies内的,只用到3个组件:

- grunt 组件,核心组件
- watch 组件,用于监听文件修改
- shell 组件,用于执行egret编译命令

注:这个文件与egretProperties.json所有目录同级。

保存后,在当前目录打开命令行,Mac中为终端,输入以下命令:


[mw_shl_code=applescript,true]npm install[/mw_shl_code]


等它从网上下载这3个组件,安装,Grunt安装完成。

第2步,配置Gruntfile.js
同样在package.json所在目录,新建Gruntfile.js,输入内容如下:

[mw_shl_code=applescript,true]        module.exports = function(grunt) {

          // Project configuration.
          grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),
            shell: {
                options: {
                    stderr: false
                },
                target: {
                    command: 'egret build  -sourcemap'
                }
            },
            watch: {
              //监听文件变化,分别有src下非skins目录的ts文件,skins的exml文件,以及launcher目录中的两个html及里面所有js
              files: ['src/**/*.ts','!src/skins*/**','src/*.js','src/**/*.exml'],
              tasks: ['shell']
            }
          });

          grunt.loadNpmTasks('grunt-shell');
          grunt.loadNpmTasks('grunt-contrib-watch')
          // 默认被执行的任务列表。
          grunt.registerTask('default', ['shell']);

        };[/mw_shl_code]


我们重点关注watch中的files配置,一定要把skins下的ts排除掉,否则会进入监听死循环,同时,你的exml皮肤也不要放到skins以外。

另外要关注的是,我们执行的shell命令为:

[mw_shl_code=applescript,true]egret build  -sourcemap[/mw_shl_code]

这里加了 -sourcemap,可以把源码的影射map编译进去,只有这样,Chrome中才可以进行断点调试。如果没有这个-sourcemap,你在Chrome中只能看到一堆乱糟糟的编译后的JS。

这个文件已经配置好而且在项目中运行得很好,如无特别可以直接使用。

至此,Grunt配置完成。

开启自动编译
继续在上面命令行或终端中,保持当前目录,执行:

[mw_shl_code=applescript,true]grunt watch[/mw_shl_code]

前面没错误的话,会看到以下结果:

[mw_shl_code=applescript,true]Running "watch" task
Waiting...[/mw_shl_code]

嗯,已经开始最监听了,只要修改ts或exml文件,就会自动编译,例如修改了Main.ts

[mw_shl_code=applescript,true]>> File "src/Main.ts" changed.
Running "shell:target" (shell) task

Done, without errors.
Completed in 4.956s at Tue May 12 2015 23:58:59 GMT+0800 (HKT) - Waiting...[/mw_shl_code]



如果你使用WebStorm8,还可以在WebStorm里执行Grunt,这样好处是可以更直观地看到编译情况,在Mac中还会弹出编译结果提示,不用切换出去提,同时也减少了WebStorm的资源占用。

1.png

不过这里还有一个缺点,就是只要文件有任何改动,例如加一个空白,都会视为修改。目前我没有精力去找解决办法,欢迎各路英雄提出解决方法。

到此,在Egret中使用Grunt实现自动编译介绍完毕,感谢观看,也欢迎提高宝贵意见。

本文源地址:http://govo.info/2015/05/autocompile-egret-by-grunt/

更新:
附件添加功能:
grunt.registerTask('default', ['shell:target']);//编译
grunt.registerTask('rebuild', ['shell:rebuild']);//重建
grunt.registerTask('publish', ['shell:publish']);//发布并打开release目录,打开目录仅Mac
grunt.registerTask('open', ['shell:reveal']);//打开当前目录,仅Mac

附上这两个Grunt需要的文件:
Gruntfile.zip (1.45 KB, 下载次数: 20)
分享到 :
2 人收藏

6 个回复

倒序浏览
张宇飞  初学乍练 | 2015-5-13 01:12:08
感谢 我试试
xsstomy  斑竹 | 2015-5-13 09:09:17
感谢亲的奉献,能上一个项目demo就更好了,表示伸手党太多了= =不差这最后一步非常感谢
abc  略有小成 | 2015-5-13 09:55:12
。。。支持原创。。赞一个。
govo  登堂入室 | 2015-5-13 09:55:42
xsstomy 发表于 2015-5-13 09:09
感谢亲的奉献,能上一个项目demo就更好了,表示伸手党太多了= =不差这最后一步非常感谢 ...

已经上传附件
xsstomy  斑竹 | 2015-5-13 10:05:53

感谢感谢这样无私奉献的你们
奕行人  登堂入室 | 2016-11-9 17:59:23
不明觉厉啊
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部