打包js文件javascript
首先看下官網對幾個核心文件的說明文檔:css
Namehtml |
Typejava |
Loadersass |
Minifiedapp |
Comments框架 |
Debugui |
Compatspa |
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文件。