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