Node.js+Yeoman构建前端自动化Web应用

Yeoman的诞生，旨在为开发者提供一系列健壮的工具、程序库和工作流，帮助他们快速构建出漂亮、引人注目的Web应用。Yeoman主要包含三个部分：yo（脚手架工具）、grunt（构建工具）、bower（包管理器）。这三个工具是独立开发的，但需要配合使用，以高效的工作流模式。官网做了详细的介绍：http://yeoman.io/

yo、grunt、bower的安装都基于Node.js，因此需要到Node.js官网https://nodejs.org/进行下载相应版本的安装包，按提示默认安装即可。安装完成，在C盘创建了一个测试文件夹web，进入文件夹，“shift+鼠标右键”=>“在此处打开命令窗口”，测试Node.js环境是否正常，如图（测试环境为虚拟机64位Windows7系统）：

1、安装Yeoman，命令行输入：

npm install -g yo grunt-cli bower

安装过程，如图：

2、安装generator-webapp，以实现快速构建web应用，命令行输入：

npm install -g generator-webapp

安装过程，如图：

3、构建web应用，命令行输入：

yo webapp

此时会提示选择安装一些前端框架，可以通过上下箭头移动，按空格键选择或取消，为了演示效果，这里选择了Bootstrap。选择完毕（可以不选），按回车，如下图：

再次出现选择提示，输入"y"，按回车，如图：

安装到这里会出现一个警示，没继续动作了，直接按回车即可：

接下来就是程序自动安装的一个过程，大概需要几分钟；完成安装，命令行输入：

grunt server

运行自动化项目，出现错误提示：

出现以上错误是因为之前web应用选择了Bootstrap框架，需要用bower安装相应的依赖包。

命令行输入：

bower install

会出现错误提示，这种情况需要安装git，使用git bash命令行工具安装，git下载地址：http://git-scm.com/

git安装完成，在测试文件夹下打开git bash命令行界面，输入：

bower install

 web应用依赖包安装完成，重新在命令行输入（系统自带的或者git bash都可以）：

grunt server

浏览器会自动打开一个界面，如图：

安装完成的web应用放在安装目录的app文件夹下，上面看到的网页就是app文件夹下的index.html文件：

如果使用的浏览器是Chrome，试着修改网页文件或者css、JS文件，可以看到页面的效果会跟着改变，完全是自动化进行的，IE应该是没有这个功能的。配合使用sass的话，更能体会到yeoman的便捷。

之前看到过介绍Gulp的文章，据说比Grunt更简单、更好用，因为没有做测试，所以就不多说了。

天朝的GFW一向丧心病狂，连国外的某些技术类网站都没放过；但值得庆幸的是，本项目安装过程畅通无阻，完全不用翻墙。

至此，web应用构建完成。

转载于:https://my.oschina.net/ximidao/blog/467059