打包js文件
首先看下官网对几个核心文件的说明文档:
Name | Type | Loader | Minified | Comments | Debug | Compat | Usage |
sencha-touch-debug.js | Core | | | | | | Use when developing your app locally |
sencha-touch.js | Core | | | | | | Use in production with a custom build |
builds/sencha-touch-all.js | All | | | | | | Use in production if you don't have a custom build |
builds/sencha-touch-all-debug.js | All | | | | | | Use to debug your app in staging/production |
builds/sencha-touch-all-compat.js | All | | | | | | Use to migrate your 1.x app to 2.x |
其实我们一般只会用到前两个文件,分别是调试模式和发布模式下,另外的三个文件都是-all的,也就是包含所有组件,文件太大,不建议使用。
在开发的时候,一般是用sencha-touch-debug.js,这是一个sencha的核心文件,不包含各种UI组件插件之类的,但是依然比较大。
我在debug.html中是这样引入文件的:
8 <script type="text/javascript" src="sdk/sencha-touch-debug.js"></script>
9 <script type="text/javascript" src="app.js"></script>
app.js就是程序的入口,可以参见官网的文档。
这个app.js定义了需要加载的若干组件,然后这些组件中可能又require了若干其他组件。sencha会依次把这些文件全部加载进来。原理类似于
其他的AMD框架,比如reqiurejs。
然后发布的时候需要把所有的“非核心代码“打包成一个文件,也就是说核心代码不用打包到一起,最终发布的是如下形式:
8 <script type="text/javascript" src="sdk/sencha-touch.min.js"></script>
9 <script type="text/javascript" src="app-all.min.js"></script>
其中sencha-touch-min.js就是sencha-touch.js的压缩版,虽然官网上标注说已经压缩了,但是我下载的gpl版本是没有压缩的,所以手动压缩了一下
app-all.min.js就是我们的重点,这里是使用sencha cmd命令打包的。
打包命令分两步:
第一步
sencha create jsb -a debug.html -p app.jsb3
从debug文件开始,创建一个app.jsb3文件。打开这个app.jsb3可以发现它的结构很简单,就是定义了通过那些文件来生成all-classes.js和app-all.js
其中all-classes.js就是除了core之外的所有模块,app-all.js就是all-classes.js+app.js。
第二部
sencha build -p app.jsb3 -d .
根据上面生成的app.jsb3就可以轻松创建出all-classes.js和app-all.js
然后我发现它没有压缩,虽然我配置了要压缩的。所以手动压缩成app-all.min.js
最后发布只需要sencha-touch.min.js和app-all.min.js即可
压缩css
sencha用的是sass,自己的sass文件应该放在resources/sass目录下,默认生成的config.rb已经配置好了基本不需要改。
在生成的app.scss中可看到import了很多组件,除了@import 'sencha-touch/default/all';之外,不用的都可以注释掉,需要用的可以再import,比如用到了pullrefreshc插 件的话,需要手动增加:@include sencha-list-pullrefresh;
打包的过程很简单,在该目录下直接compass compile即可,会最终生成一个压缩的app.css文件。