Hybrid框架UI重構之路：三、工欲善其事，必先利其器
工欲善其事，必先利其器，事是重構的目標，器是開發環境。
這篇文章將講述重構時的UI框架的目錄結構，且需要使用的開發工具。
目錄結構
demo : 開發框架的模板（單頁模式）
demo-muti : 開發框架的模板（多頁模式）
demo-scene : 示例模板。一個完整的示例，目的是給使用者稍作修改就可以使用在項目上。
demo-template : 給使用者使用的開發模板。
demo-whole : 可在PC上演示的示例模板
dist : UI框架的提供的庫
doc : 文檔目錄
libs : UI框架依賴的庫，註明版本。
node_modules : node工具
src ： UI框架源碼
Gruntfile.js : Gruntfile.js配置css、image、javascript、html合併、壓縮等
package.json : package.json文件來聲明項目中使用的node模塊
關於less的這個工具的文章很多，我也就不詳細說，主要爲了方便 CSS 的書寫及維護、複用。
其實使用less，有利也有弊，但總歸利大於弊。
1.一看就瞭解樣式應用的範圍（這是我覺得最好的地方），比純css好理解。
.module { div { a { //styles } } }
2.LESS 在 CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，並且降低了 CSS 的維護成本。
1.畢竟最後生成的樣式跟最初less樣式還是有些區別，當頁面樣式做調整的時候（一般是在chrome調試），調試完樣式後，又要將自己修改的樣式寫成less樣式，看起來麻煩很多。
例：
自己增加了
.module li { line-height:18px; }
後面寫回less樣式
.module { li { line-height:18px; } }
然後再重新生成css文件。
另外我使用的也只有兩條簡單的命令
lessc xxx.less > xxx.css
lessc -x xxx.less > xxx.min.css
後面那條是壓縮後的文件。
grunt這個工具（nodeJs的命令行工具），我用來做Javascript文件的合併、壓縮和複製。
以前UI框架的版本是一個大文件bingotouch.css，js也是。這是不利於我們開發的，於是我將他們拆分成模塊，拆分之後又面臨合併的問題，於是就使用grunt這個工具。
1、nodeJs環境
因爲grunt是基於nodeJs的，所以首先需要安裝nodeJS環境
2、安裝grunt
安裝grunt，因爲我們可能在任何目錄下運行打包程序，所以我們需要安裝CLI
grunt的命令行：
npm install -g grunt-cli
3、編寫package.json（聲明項目中使用的node模塊）
{ "name":"BingoTouch", "version":"3.0.0", "engines":{ "node":">= 0.8.0" }, "devDependencies":{ "grunt":"~0.4.0", "grunt-contrib-concat":"~0.3.0", "grunt-contrib-copy" : "~0.4.1", "grunt-contrib-cssmin" : "~0.6.0", "grunt-contrib-uglify":"~0.2.0", "express":"" } }
grunt-contrib-concat ： 文件合併
grunt-contrib-copy ： 文件複製
grunt-contrib-cssmin : css壓縮
grunt-contrib-uglify : js壓縮
4、編寫Gruntfile.js
module.exports = function(grunt){ grunt.initConfig({ pkg : grunt.file.readJSON('package.json'), concat : { 'dist/bingotouch.js' : ['demo/js/ui.js', "demo/js/module/ui.GarbageCollection.js", 'demo/js/module/ui.plugins.js', 'demo/js/module/ui.Utils.js', 'demo/js/module/ui.Element.js', 'demo/js/module/ui.Transition.js', 'demo/js/module/ui.Page.js', 'demo/js/module/ui.IScroll.js', 'demo/js/module/ui.alias.js', 'demo/js/module/ui.Popup.js', 'demo/js/module/ui.Skin.js', 'demo/js/module/ui.Menu.js', 'demo/js/module/ui.Tab.js', 'demo/js/module/ui.SwipeListview.js', 'demo/js/plugin/zepto.extend.js', 'demo/js/plugin/zepto.ui.js', 'demo/js/plugin/zepto.ui.slider.js', 'demo/js/plugin/zepto.ui.navigator.js', 'demo/js/plugin/zepto.ui.navigator.iscroll.js']/*, 'dist/bingotouch.css' : ['demo/css/base.css','demo/css/module/*.css']*/ }, uglify : { target : { files : { 'dist/bingotouch.min.js': 'dist/bingotouch.js' } } }/*, cssmin : { target : { files : { 'dist/bingotouch.min.css': 'dist/bingotouch.css' } } }*/, copy : { target : { files : [ {expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'demo/js/'} , {expand: true,cwd: 'dist/',src: ['bingotouch.js','bingotouch.min.js'],dest: 'demo-muti/js/'} , {expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'demo-scene/link/js/'} , {expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'demo-scene/news/js/'} , {expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'demo-scene/business/js/'} , {expand: true,cwd: 'dist/',src: ['bingotouch.js','bingotouch.min.js'],dest: 'demo-template/js/'} , {expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'demo-whole/js/'} , {expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'doc/api-doc/'} , {expand: true,cwd: 'demo/js/plugin/',src: ['linkplugins.js','sharesdkplugin.js'],dest: 'doc/api-doc/'}, {expand: true,cwd: 'demo/css/',src: ['bingotouch.css','bingotouch.min.css'],dest: 'demo-muti/css/'} , {expand: true,cwd: 'demo/css/',src: ['bingotouch.css'],dest: 'demo-scene/link/css/'} , {expand: true,cwd: 'demo/css/',src: ['bingotouch.css'],dest: 'demo-scene/news/css/'} , {expand: true,cwd: 'demo/css/',src: ['bingotouch.css'],dest: 'demo-scene/business/css/'} , {expand: true,cwd: 'demo/css/',src: ['bingotouch.css','bingotouch.min.css'],dest: 'demo-template/css/'} , {expand: true,cwd: 'demo/css/',src: ['bingotouch.css'],dest: 'demo-whole/css/'} ] } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); /*grunt.loadNpmTasks('grunt-contrib-cssmin');*/ grunt.loadNpmTasks('grunt-contrib-copy'); grunt.registerTask('default', ['concat','uglify'/*,'cssmin'*/,'copy']); }
這文件的配置是我重構後，css和js的合併、壓縮、複製。細心的人會發現cssmin的功能我沒使用，這是因爲我的css是less編寫的，所以css文件的合併壓縮也就由less工具完成。
文檔是作爲框架必不可少的一部分，如果快捷方便生成文檔也是我們考慮的。
這是我之前對文檔化工具的調查：http://www.cnblogs.com/lovesong/p/3267047.html
我選擇了yuidoc作爲文檔化工具，下面是我生成的文檔。
在此說下一些YUIDoc的信息
YUIDoc是個NodeJS應用，能將你JS代碼中的註釋生成HTML格式的API文檔。
事實上，不僅是JS，任何支持塊註釋（指/* */）的語言都能用。
只解析YUIdoc的註釋塊，不解析源代碼。
1.安裝NodeJS，下載地址：http://nodejs.org/download/
2.打開cmd，執行命令npm -g install yuidocjs，即可安裝YUIDoc。
1.設定一個類即@class之後，YUI默認把之後函數或屬性歸屬爲這個類,直到有類重新定義。
2.註釋方式
/** YUIDoc會認這以兩個星開頭的 */ /* YUIDoc不認一個星開頭的 */
3.每個註釋塊中能有且僅有一個主標籤
由於標籤的介紹內容太多，就不在這裏介紹了。
YUIDoc模板頁面生成模板。根據我們註釋的標籤（充當數據源），在根據頁面模板（視圖），生成文檔。
github上有很多主題模板，而上面圖片的使用的模板是我覺得最好看的，所以就選擇了這個。
PS:github是好東西，善用能幫我們很多。
yuidoc.json
生成文檔有個命令，一般我是準備好註釋好的js文件，在加上一個yuidoc.json的配置文件，然後是控制檯cd到這個目錄，執行命令。
yuidoc .
簡單描述下yuidoc.json的東西
{ "name": "BingoTouch API", "description": "讓開發人員可以使用Web開發技術，如：HTML5、CSS3、Javascript等，開發出與原生程序具有相同用戶體驗的移動終端應用", "version": "3.1.0 Powered By 雲應用平臺部", "url": "XXXXXXXXXXXXXXX", "options": { "linkNatives": "true", "outdir": "./docs", "paths":"code/", "themedir": "../yuidoc-theme-blue-master" } }
這裏有兩個重要的屬性
outdir : 生成的文檔放置的文件路徑。
themedir : 這個是之前所說的主題模板，如果沒有設則模式使用yuidoc的默認模板。
這篇工具的說明就到此了，工具的使用無非就是爲了方便開發，上面的描述也許不這麼詳細，希望是做到指引的作用。