上文回顧：Hybird框架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模塊

PS:這個是一級目錄，其他層級的也就不截圖了。 less

關于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文件。

PS:簡單來說就是調試麻煩。

另外我使用的也只有兩條簡單的命令

lessc xxx.less > xxx.css lessc -x xxx.less > xxx.min.css

后面那條是壓縮后的文件。

grunt

grunt這個工具（nodeJs的命令行工具），我用來做Javascript文件的合并、壓縮和復制。

以前UI框架的版本是一個大文件bingotouch.css，js也是。這是不利于我們開發的，于是我將他們拆分成模塊，拆分之后又面臨合并的問題，于是就使用grunt這個工具。

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工具完成。

?

yuidoc

文檔是作為框架必不可少的一部分，如果快捷方便生成文檔也是我們考慮的。

這是我之前對文檔化工具的調查：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。

YUIDoc注意事項

1.設定一個類即@class之后，YUI默認把之后函數或屬性歸屬為這個類,直到有類重新定義。

2.注釋方式

/**YUIDoc會認這以兩個星開頭的 */ /*YUIDoc不認一個星開頭的 */

3.每個注釋塊中能有且僅有一個主標簽

YUIDoc標簽

由于標簽的介紹內容太多，就不在這里介紹了。

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的默認模板。

總結

這篇工具的說明就到此了，工具的使用無非就是為了方便開發，上面的描述也許不這么詳細，希望是做到指引的作用。

本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。 本文地址：http://www.cnblogs.com/lovesong/p/4296871.html 本文轉自 海角在眼前 博客園博客，原文鏈接：?http://www.cnblogs.com/lovesong/p/4296871.html? ，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的Hybrid框架UI重构之路：三、工欲善其事，必先利其器的全部內容，希望文章能夠幫你解決所遇到的問題。

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