Sencha Touch 打包javaScript 和 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文件。