H5頁面開發流程

        H5頁面開發採用前端工程自動化構建工具——Yeoman。Yeoman具備集成的包管理、自動編譯、內建的預覽服務器，能快速建立骨架應用程序。Yeoman主要由三個工具組成：Yo、Grunt、Bower。

Yo：項目工程依賴目錄和文件、生產環境和編譯環境的生成工具。

Grunt：前端構建工具，用來構建、預覽以及測試項目。

Bower：Web開發包管理器。

1、安裝

NodeJS > =0.8.x  （http://www.nodejs.org/ Or Ftp 上x86版）

Git

Ruby  >= 1.8.7 （  https://www.ruby-lang.org/zh_cn/downloads/ Or Ftp上）

Compass >= 0.12.1 （http://compass-style.org/）

2、新建工程

新建工程主要的命令流程以下： 

yo webapp       #搭建一個Web應用程序的腳手架骨架

npm install       #安裝默認依賴

bower install    #安裝bower中的依賴

grunt test         #測試應用

grunt server     #預覽應用

grunt build       #部署構建應用

grunt serve:dist    #預覽部署過的應用

具體步驟說明請查閱參考文獻。

3、從Git中構建工程

步驟1：從Git中clone分支到本地。文件結構目錄以下：

Gruntfile.js是grunt的配置文件。

package.json是Yoeman自動生成的文件，指定項目所需安裝的模塊。

bower.json是項目的依賴列表。

 

步驟2：運行安裝命令

npm install  （安裝pakage.json中的模塊）

bower install （安裝bower.json中指定的依賴插件）

4、在服務器上部署

      在用git將最新的代碼提交到遠端後，進入jenkins進行部署。具體位置在XMLife_frontend_with_git標籤頁下 ，以下圖所示。

5、參考文獻

Yoeman：

            http://yeoman.io/  （en）

            http://yeomanjs.org/

            http://www.iinterest.net/2013/05/04/f2e-tool-yeoman/

            http://www.cnblogs.com/cocowool/archive/2013/03/09/2952003.html

Grunt：

           http://www.gruntjs.net/

            http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html

            http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201307/216460.shtml