sencha touch2 - 打包压缩js和css

打包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文件。