ExtJS（6）- 用Sencha Cmd构建打包Ext项目

ExtJS（6）- 用Sencha Cmd构建打包Ext项目

来源：互联网  作者：佚名  时间：2015-06-12 05:14

用ExtJS组建前端框架有一年多了，考虑到ExtJS中js过多，为提高效率，所以开始寻找打包的方法，然后就发现了这个SenchaCmd。首先SenchaCmd不仅仅是为了打包而生的

id="cproIframe_u2330612_3" width="300" height="300" src="http://pos.baidu.com/acom?adn=3&adp=1&at=0&aurl=&c01=1&cad=1&ccd=24&cec=GBK&cfv=0&ch=0&col=zh-CN&conBW=1&conOP=1&cpa=1&cpro_lu=1%2C%23dfe4f9%2C%23000000%2C%E5%AE%8B%E4%BD%93&dai=3&dis=0&layout_filter=image&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DzyCHWFNwZCoyrxdLygyZDEAhDt7E_soqpt-OrPUiVCePLdfninc0I-quiBRqoVfz-2aOfg7NBLxvjqWiZ7QmRnT2zuOeABpnBSiaVUxADOe%26wd%3D%26eqid%3Da11341d5000292ed000000025656cd68&ltu=http%3A%2F%2Fwww.68idc.cn%2Fhelp%2Fjiabenmake%2Fqita%2F20150612365193.html&lu_161=0&lunum=6&n=24066120_cpr&pat=17&pcs=1903x955&pis=10000x10000&ps=549x469&psr=1920x1080&pss=1903x575&ptt=0&qn=eb5baf7c00e060cb&rad=&rsi0=300&rsi1=300&rsi5=4&rss0=%23FFFFFF&rss1=%23FFFFFF&rss2=%23000000&rss3=%23444444&rss4=%23008000&rss5=&rss6=%23e10900&rss7=&scale=&skin=tabcloud_skin_5&stid=5&td_id=2330612&titFF=%E5%AE%8B%E4%BD%93&titFS=14&titSU=0&titTA=left&tn=baiduCustNativeAD&tpr=1448529150187&ts=1&version=2.0&xuanting=0&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&di=u2330612&ti=ExtJS%EF%BC%886%EF%BC%89-%20%E7%94%A8Sencha%20Cmd%E6%9E%84%E5%BB%BA%E6%89%93%E5%8C%85Ext%E9%A1%B9%E7%9B%AE%20-%20%E9%B8%BF%E7%BD%91%E4%BA%92%E8%81%94%5B68IDC.CN%5D&tt=1448529150167.161.180.181" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="margin: 0px; padding: 0px;">

id="cproIframe_u2330621_4" width="300" height="300" src="http://pos.baidu.com/acom?adn=0&at=128&aurl=&cad=1&ccd=24&cec=GBK&cfv=0&ch=0&col=zh-CN&conBW=0&conOP=1&cpa=1&cpro_lu=1%2C%23dfe4f9%2C%23000000%2C%E5%AE%8B%E4%BD%93&dai=4&dis=0&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DzyCHWFNwZCoyrxdLygyZDEAhDt7E_soqpt-OrPUiVCePLdfninc0I-quiBRqoVfz-2aOfg7NBLxvjqWiZ7QmRnT2zuOeABpnBSiaVUxADOe%26wd%3D%26eqid%3Da11341d5000292ed000000025656cd68&ltu=http%3A%2F%2Fwww.68idc.cn%2Fhelp%2Fjiabenmake%2Fqita%2F20150612365193.html&lu_161=0&lunum=6&n=24066120_cpr&pcs=1903x955&pis=10000x10000&ps=549x1109&psr=1920x1080&pss=1903x875&qn=b480015f0e29d139&rad=&rsi0=300&rsi1=300&rsi5=4&rss0=%2386AC5F&rss1=%23FFFFFF&rss2=%230000ff&rss3=&rss4=&rss5=&rss6=%23e10900&rss7=&scale=&skin=tabcloud_skin_5&stid=5&td_id=2330621&titFF=%E5%AE%8B%E4%BD%93&titFS=12&titTA=left&tn=baiduCustSTagLinkUnit&tpr=1448529150187&ts=1&version=2.0&xuanting=0&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&di=u2330621&ti=ExtJS%EF%BC%886%EF%BC%89-%20%E7%94%A8Sencha%20Cmd%E6%9E%84%E5%BB%BA%E6%89%93%E5%8C%85Ext%E9%A1%B9%E7%9B%AE%20-%20%E9%B8%BF%E7%BD%91%E4%BA%92%E8%81%94%5B68IDC.CN%5D&tt=1448529150167.186.206.207" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="margin: 0px; padding: 0px;">

    用ExtJS组建前端框架有一年多了，考虑到ExtJS中js过多，为提高效率，所以开始寻找打包的方法，然后就发现了这个Sencha Cmd。首先Sencha Cmd不仅仅是为了打包而生的，它同样具有构建前端框架的作用。

    以下为所需的环境：

Ant下载地址：

Ruby是为了使用其中的gem（类似于nodejs中的NPM）去下载sass和compass，而compass在build中起到编译打包sass文件为css文件的作用。

Ruby安装完成后会有gem一起安装完成，由于国内的网络，用gem加载sass与compass时要注意替换gem的resources地址，参照淘宝提供的镜像，

1、创建workspace:

sencha generate workspace /path/to/workspace

2、创建项目

sencha generate app -ext MyApp /path/to/MyApp

3、build项目

此处sencha命令需要到MyApp目录下执行

sencha app build

4、sencha运行

sencha web start

登陆地址：

:1841/MyApp/

其中build中多次遇到 MyApp\.sencha\app\build-impl.xml中报错

一下提出一种解决方案：

1、在ext\cmd下的sencha.cfg起始处添加配置skip.sass=1

2、将ext\cmd下的sencha.cfg文件拷贝到MyApp\app目录下

3、到MyApp目录下sencha app build打包

4、将build\temp\production\MyApp\slicer-temp下的MyApp-example.css拷贝到build\production\MyApp\resources下，，并更名为MyApp-all.css

5、重新执行步骤3

出错步骤还是存在于sass文件的编译打包过程中，此处将本应该生成到目标地址的文件用文件替换的方式让build继续走下去。

如果大家有相应的解决方案，请不吝赐教！

本文出自 “雪飘七月” 博客，请务必保留此出处