H5页面开发流程

        H5页面开发采用前端工程自动化构建工具——Yeoman。Yeoman具有集成的包管理、自动编译、内建的预览服务器,能快速创建骨架应用程序。Yeoman主要由三个工具组成:Yo、Grunt、Bower。

Yo:项目工程依赖目录和文件、生产环境和编译环境的生成工具。

Grunt:前端构建工具,用来构建、预览以及测试项目。

Bower:Web开发包管理器。

一、安装

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/

二、新建工程

新建工程主要的命令流程如下: 

yo webapp       #搭建一个Web应用程序的脚手架骨架

npm install       #安装默认依赖

bower install    #安装bower中的依赖

grunt test         #测试应用

grunt server     #预览应用

grunt build       #部署构建应用

grunt serve:dist    #预览部署过的应用

具体步骤说明请查阅参考文献。

三、从Git中构建工程

步骤1:从Git中clone分支到本地。文件结构目录如下:

Gruntfile.js是grunt的配置文件。

package.json是Yoeman自动生成的文件,指定项目所需安装的模块。

bower.json是项目的依赖列表。

 

步骤2:运行安装命令

npm install  (安装pakage.json中的模块)

bower install (安装bower.json中指定的依赖插件)

四、在服务器上部署

      在用git将最新的代码提交到远端后,进入jenkins进行部署。具体位置在XMLife_frontend_with_git标签页下 ,如下图所示。

五、参考文献

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

 

posted @ 2016-04-01 11:00  renyangli  阅读(1228)  评论(0编辑  收藏  举报