Sencha Touch 打包javaScript 和 css

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

相關文章
相關標籤/搜索