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

轉載于:https://www.cnblogs.com/Con-ng/p/3783213.html

總結

以上是生活随笔為你收集整理的Sencha Touch 打包javaScript 和 css的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。