一、Yeoman是Google的团队和外部贡献者团队合作开发的，他的目标是通过Grunt（一个用于开发任务自动化的命令行工具）和Bower（一个HTML、CSS、Javascript和图片等前端资源的包管理器）的包装为开发者创建一个易用的工作流。
1.安装yeoman
npm install -g yo
2.安装generator-webapp库
npm install -g generator-webapp
3.yo webapp快速构建一个web项目
yo webapp
二、bower
Bower 是 twitter 推出的一款包管理工具，基于nodejs的模块化思想，把功能分散到各个模块中，让模块和模块之间存在联系，通过 Bower 来管理模块间的这种联系。
1.安装bower
npm install bower -g
2.项目初始化，通过回答几个问题，就会自动生成bower.json文件。这是项目的配置文件
bower init
3.配置文件.bowerrc
项目根目录下（也可以放在用户的主目录下）的.bowerrc文件是Bower的配置文件，它大概像下面这样
{
"directory" : "components",
"json" : "bower.json",
"endpoint" : "https://Bower.herokuapp.com",
"searchpath" : "",
"shorthand_resolver" : ""
}
其中的属性含义如下
directory：存放库文件的子目录名。
json：描述各个库的json文件名。
endpoint：在线索引的网址，用来搜索各种库。
searchpath：一个数组，储存备选的在线索引网址。如果某个库在endpoint中找不到，则继续搜索该属性指定的网址，通常用于放置某些不公开的库。
shorthand_resolver：定义各个库名称简写形式。
2.库的安装，安装jquery
bower install jquery
3.生成bower.json配置文件
bower init
三、gruntI(http://javascript.ruanyifeng.com/tool/grunt.html)
1.安装grunt-cli
grunt-cli并不grunt，grunt-cli的作用是管理本地各版本的grunt，让命令行可以直接执行grunt命令。
grunt-cli表示安装的是grunt的命令行界面，参数g表示全局安装。
npm install -g grunt-cli
2全局安装grunt
npm install -g grunt
grunt命令执行，是需要当前目录中包括package.json和Gruntfile.js两个文件。
package.json，是npm项目配置文件
Gruntfile.js，是专门用来配置grunt的配置文件
3.自动生成package.json文件
npm init
4.如果已有的package.json文件不包括Grunt模块，可以在直接安装Grunt模块的时候，加上–save-dev参数，该模块就会自动被加入package.json文件。
npm install grunt --save-dev
安装-save-dev，就可以，直接把grunt作为devDependencies写入的package.json中。
5.命令脚本文件Gruntfile.js
新建脚本文件Gruntfile.js。它是grunt的配置文件就好像package.json是npm的配置文件一样。Gruntfile.js就是一般的Node.js模块的写法。
module.exports = function(grunt) {
// 配置Grunt各种模块的参数
grunt.initConfig({
jshint: { /* jshint的参数 */ },
concat: { /* concat的参数 */ },
uglify: { /* uglify的参数 */ },
watch: { /* watch的参数 */ }
});
// 从node_modules目录加载模块文件
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// 每行registerTask定义一个任务
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
grunt.registerTask('check', ['jshint']);
};
上面的代码用到了grunt代码的三个方法：
grunt.initConfig：定义各种模块的参数，每一个成员项对应一个同名模块。
grunt.loadNpmTasks：加载完成任务所需的模块。
grunt.registerTask：定义具体的任务。第一个参数为任务名，第二个参数是一个数组，表示该任务需要依次使用的模块。default任务名表示，如果直接输入grunt命令，后面不跟任何参数，这时所调用的模块（该例为jshint，concat和uglify）；该例的check任务则表示使用jshint插件对代码进行语法检查。
5.Grunt常用插件
grunt-contrib-uglify：压缩js代码
grunt-contrib-concat：合并js文件
grunt-contrib-qunit：单元测试
grunt-contrib-jshint：js代码检查
grunt-contrib-watch：监控文件修改并重新执行注册的任务
npm init
npm install grunt --save-dev
npm install load-grunt-tasks --save-dev
npm install time-grunt --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-clean --save-dev
grunt copy
grunt clean
yo webapp grunt-yo-webapp
