前端项目工程化(yo+grunt/gulp+bower)

所谓工程化，就是将无序的，繁杂的操作组织起来，利用工具来简化、规范流程，从而实现项目构建、开发、维护的一体化过程。

就前端而言，现在比较流行的项目构建工具有yoeman，grunt，gulp，bower。这篇文章将介绍如何使用yoeman，grunt/gulp，bower来创建一个前端项目。

一、准备工作

1，        安装node.js，在官网下载dmg包然后安装即可。安装node.js之后，即可在命令行里面使用npm命令来安装其他的工具包。（npm: node package manager）

2，        安装yo、Grunt、Bower，在命令行里面通过npm命令来安装：sudo npm install –g yo grunt-cli bower，安装好之后就可以开始构建项目了。

3，        安装generator-webapp，使用命令：sudo npm install –g generator-webapp，generator-* 是Yoeman提供的快速开发框架，类似于maven-webapp，maven-java，就是一个项目模板，比如generator-webapp，generator-angular，generator-react-fullstack等，generator库：http://yoeman.io/generators/。（注：在generator-webapp@v0.6.2之后，默认使用的构建工具是gulp而不是grunt）

4，        安装 generator-angular，使用命令：sudo npm install –g generator-angular.

5，        安装 compass， 使用命令： sudo gem install compass（gem是ruby命令，Mac已经集成了ruby，故无需重新安装ruby。）

(了解Yo+grunt/gulp+bower:

Yoeman是Google的团队和外部贡献者团队合作开发的，主要由Yo+grunt/gulp+bower三个工具协同开发，Yo[脚手架、自动化工具]，grunt/gulp[构建工具，压缩js/css/图片等]，bower[包管理工具，类似java后端的maven，就是大家熟悉的dependencies]。

另：gulp是基于stream[Unix流的概念]工作的，相比于grunt更加快速，并且安装简洁，API也更加精炼，github上很多项目也已经从grunt移到gulp上了)

二、项目构建(yo+gulp+bower)

1，        在workspace里面新建BookStore 文件夹: mkdir BookStore，然后 cd BookStore

2，        创建项目，使用命令： yo webapp BookStore, 截图如下：

项目目录：

 

3，        运行： gulp serve，这时WebStorm会自动打开浏览器，显示index.html.如下图：

 

网页：

三、项目构建(yo+grunt+bower)

1，        同上面的1.

2，        创建项目，使用命令： yo angular BookStore，截图如下：

 

 项目目录：

          

3，        运行项目，使用命令： grunt serve, 发现有如下问题：

 

运行命令： npm install grunt –save-dev

再次运行： grunt-serve，发现还是有问题：“notfound modudle ***”,即未安装相应的模块，

这时运行：npm install –save-dev 这个需要一点时间，应该需要安装相应的各个模块，虽然我也不知道具体是什么模块，感觉使用grunt这点不太好，模块太多，还不能自动创建bower_compoents目录和运行bower，都需要手动，如下面的问题。

 

然后是下面的问题：

这时需要运行：mkdir bower_components, 然后运行：bower install --save-dev 下图需更改命令！

 

bower install –save-dev之后，文件目录结构：

 

4，        运行： grunt serve 即可在浏览器上看到项目页面了

 

现在已经搭建好了项目，接下来的事情就是编码了，然后使用nodejs创建http-server来完成前端的自动化测试。下一篇文章我会继续基于这个BookStore项目来介绍如何使用nodejs来创建http-server。