使用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的代碼打包進去。