使用Kissy Pie快速構建—kissy1.2最佳實踐探索
kissy1.2模組檔案打包問題
來看個第一次使用kissy1.2來構建專案時，需要進行的步驟：
從上圖來看，構建的成本主要在構建的環境搭建和build.xml上。
從環境上，需要安裝ant以及知道ant的基本使用方法；
從build.xml構建檔案上，沒辦法拿來即用，需要根據專案的目錄情況做修改，期間出錯的概率頗高
明河收到的關於kissy1.2的問題中，釋出前合併問題最為突出，執行ant來打包模組檔案時拋異常，對ant的使用和kissy的loader 打包機制不是很理解，就很容易不知所措。開發者需要額外的時間研究如何使用ant構建專案檔案，如何使用kissy的Module Compiler。
有沒有什麼辦法讓開發者從構建編寫中解脫出來呢？
Kissy Pie
使用Kissy Pie快速構建kissy專案
Kissy Pie基於nodeJs的專門用於kissy專案構建的工具，由文龍同學為首的自動化工具小組完成，已經實現的功能有：建立專案目錄和檔案、打包kissy1.2的模組指令碼、打包css檔案、壓縮js和css、快速生成釋出目錄、編譯less等。
經過業務線的嘗試使用，Kissy Pie的確可以提高不少前端效率，而使用Kissy Pie的學習成本比使用ant打包低了很多，同時少了構建指令碼除錯的過程。
Kissy Pie能為你做些什麼？
快速建立kissy1.2的assets目錄
快速打包模組檔案
自動壓縮js、css
less打包
css combo
實時監控打包
……（後續會有更多功能）
Kissy Pie相對於ant構建的優勢總結
（PS：FB即Kissy Pie）
安裝Kissy Pie
1.安裝NodeJS和npm。
Kissy Pie工具依託於Nodejs，Nodejs的安裝非常的簡單，明河就不再累述。
npm的安裝，請看《深入淺出Node.js（二）：Node.js&NPM的安裝與配置》
2.安裝Kissy Pie
執行如下命令，會從npm的倉庫中拉取Kissy Pie包：
npm install kissy-pie -g;
|
接下來通過一個demo工程講解fb的使用。
初始化工程目錄
假設新專案名為kissy-pie-demo，對應有個kissy-pie-demo目錄。
使用ki init命名初始化專案目錄結構：
會生成如下目錄：
- app
// root of app
├ common
// 通用指令碼與樣式， 可直接引用，獨立打包
├ utils
// 通用元件, 使用時打包入page使用, 一般不單獨引用
├ docs
//介面文件，非必須
├ tools
//專案工具，非必須
└ fb.json
// 應用的配置, fb 應用根路徑的標識
|
下面我們建立個專案的demo頁面指令碼。
使用ki add命名建立頁面目錄
fb add demo/1.0
|
來看下建立的demo目錄結構：
- app
// root of app
├ demo
// demo頁面指令碼
│ ├ 1.0
// page 版本 目錄
│ │ ├ test
// 測試用例 目錄
│ │ ├ page
// page 的入口檔案目錄, 打包，引用的入口
│ │ │ ├ mods
// page的模組目錄
│ │ ├ fb-build.sh
// 打包快捷方式
│ │ ├ fb-build.bat
// 打包快捷方式
│ │ └ fb.page.json
// page 相關配置
|
（PS:在kissy pie中約定版本目錄比如1.0，為原始碼目錄。）
工程的目錄結構已經構建出來了，接下來我們嘗試寫一些demo指令碼。
建立demo指令碼
一個demo業務模組指令碼：demo/1.0/page/mods/header.js
KISSY.add(
function
(S,form) {
return
function
(){
form();
alert(
'header of refund.'
);
}
});
|
一個demo入口模組指令碼：demo/1.0/page/init.js
KISSY.add(
function
(S, Header) {
return
function
(){
Header();
return
'this is demo page.'
;
}
}, {requires:[
'./mods/header'
]});
|
（PS:此入口指令碼依賴mods/header.js。）
使用ki build命令打包出發布目錄
釋出目錄指是以時間為命名的模組打包後的目錄，比如專案釋出日期為20120802，那麼就打包出對應的目錄，供線上實際引用（線上不直接引用原始碼，除非開啟除錯）。
執行ki build demo/1.0 -t 20120802
打包 1.0(原始碼) 的 demo(當前PageName) 模組指令碼到時間戳目錄 ‘20120802’
生成的目錄的結構如下：
- app
// root of app
├ demo
// demo頁面指令碼
│ ├ 1.0
// page 版本 目錄
│ ├ 20120802
//釋出目錄
│ │ ├ page
│ │ │ ├ init.js
//模組打包後的指令碼
│ │ │ ├ init-min.js
//壓縮後的合併指令碼（線上實際引用指令碼）
│ │ ├ build.json
|
線上載入的是20120802目錄下打包後文件init-min.js，而當進行除錯時，可以快速切到1.0原始碼目錄。
整個打包過程，比使用kissy的module compiler快速很多，同時使用者不需要額外寫一個build.xml構建檔案。
接下來我們在demo頁面中引用上述構建的assets檔案。
建立個demo頁面
在頁面中引入common/package-config.js包配置檔案
包配置
FB.config({
path:
'.'
,
// 基路徑（模組路徑定址的基點）
name:
'demo'
,
// 頁面名（會拼入模組js路徑中）
version:
'1.0'
,
// 原始碼目錄名（fb的目錄約定版本號目錄即原始碼目錄），也會拼入模組js路徑中
pub:
'20120802'
//釋出目錄即模組打包後目錄（當頁面中引入的kissy-min.js，會去引用該資料夾的模組js，比如init-min.js）
});
|
use入口模組
KISSY.use(
'page/init'
,
function
(S,Apply){
var
msg = Apply();
S.log(msg);
})
|
完整demo頁面程式碼請看demo.html。
預設載入模組情況：
載入的是20120802目錄時間戳下的打包後文件。
頁面的url後加上ks-debug後（開啟除錯）：
載入的是1.0目錄下的原始碼檔案。
使用Kissy Pie還可以打包less和css檔案
新建個page/style.less，程式碼如下：
@import
'./mods/header.less'
;
|
再新建個page/mods/header.less，程式碼如下：
body{
background-color
:
#ccc
;
}
|
再次執行ki build demo/1.0 -t 20120802，less檔案自動編譯成css檔案！
（ps：除了less外，還支援css模組檔案打包，思路差不多，在page/style.css中import mods/下css檔案。）
使用批處理檔案快速構建
使用Kissy Pie建立頁面目錄後，會在目錄下自動生成fb-build.bat和fb-build.sh。
開啟fb-build.bat，編輯成如下程式碼：
ki build demo/1.0 -t 20120802
|
雙擊fb-build.bat，就可以快速構建該頁面指令碼，無需進入命令列工具。
Kissy Pie工具的使用就到這裡，更多的使用技巧，請看文件。
Kissy Pie構建的目錄總攬
關於common目錄
common為靜態資源引用目錄，有些指令碼可能我們並不需要非同步載入，同時又是應用級（即每個頁面都會引用到）的檔案，比如頁頭公用指令碼等。
關於utils目錄
utils為應用公用元件目錄，比如demo頁面都會用到form（表單元件），可以放到此目錄，業務模組use時可以這麼處理：
KISSY.add(
function
(S,form) {
},{requires:[
'utils/form'
]});
|
Kissy Pie會自動將utils的程式碼打包進去。
轉載於:https://my.oschina.net/yangff/blog/187355