一、Yeoman是Google的團(tuán)隊(duì)和外部貢獻(xiàn)者團(tuán)隊(duì)合作開發(fā)的，他的目標(biāo)是通過Grunt（一個(gè)用于開發(fā)任務(wù)自動(dòng)化的命令行工具）和Bower（一個(gè)HTML、CSS、Javascript和圖片等前端資源的包管理器）的包裝為開發(fā)者創(chuàng)建一個(gè)易用的工作流。
1.安裝yeoman
npm install -g yo
2.安裝generator-webapp庫
npm install -g generator-webapp
3.yo webapp快速構(gòu)建一個(gè)web項(xiàng)目
yo webapp
二、bower
Bower 是 twitter 推出的一款包管理工具，基于nodejs的模塊化思想，把功能分散到各個(gè)模塊中，讓模塊和模塊之間存在聯(lián)系，通過 Bower 來管理模塊間的這種聯(lián)系。
1.安裝bower
npm install bower -g
2.項(xiàng)目初始化，通過回答幾個(gè)問題，就會(huì)自動(dòng)生成bower.json文件。這是項(xiàng)目的配置文件
bower init
3.配置文件.bowerrc
項(xiàng)目根目錄下（也可以放在用戶的主目錄下）的.bowerrc文件是Bower的配置文件，它大概像下面這樣
{
"directory" : "components",
"json" : "bower.json",
"endpoint" : "https://Bower.herokuapp.com",
"searchpath" : "",
"shorthand_resolver" : ""
}
其中的屬性含義如下
directory：存放庫文件的子目錄名。
json：描述各個(gè)庫的json文件名。
endpoint：在線索引的網(wǎng)址，用來搜索各種庫。
searchpath：一個(gè)數(shù)組，儲(chǔ)存?zhèn)溥x的在線索引網(wǎng)址。如果某個(gè)庫在endpoint中找不到，則繼續(xù)搜索該屬性指定的網(wǎng)址，通常用于放置某些不公開的庫。
shorthand_resolver：定義各個(gè)庫名稱簡寫形式。
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，讓命令行可以直接執(zhí)行g(shù)runt命令。
grunt-cli表示安裝的是grunt的命令行界面，參數(shù)g表示全局安裝。
npm install -g grunt-cli
2全局安裝grunt
npm install -g grunt
grunt命令執(zhí)行，是需要當(dāng)前目錄中包括package.json和Gruntfile.js兩個(gè)文件。
package.json，是npm項(xiàng)目配置文件
Gruntfile.js，是專門用來配置grunt的配置文件
3.自動(dòng)生成package.json文件
npm init
4.如果已有的package.json文件不包括Grunt模塊，可以在直接安裝Grunt模塊的時(shí)候，加上–save-dev參數(shù)，該模塊就會(huì)自動(dòng)被加入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各種模塊的參數(shù)
grunt.initConfig({
jshint: { /* jshint的參數(shù) */ },
concat: { /* concat的參數(shù) */ },
uglify: { /* uglify的參數(shù) */ },
watch: { /* watch的參數(shù) */ }
});
// 從node_modules目錄加載模塊文件
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// 每行registerTask定義一個(gè)任務(wù)
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
grunt.registerTask('check', ['jshint']);
};
上面的代碼用到了grunt代碼的三個(gè)方法：
grunt.initConfig：定義各種模塊的參數(shù)，每一個(gè)成員項(xiàng)對(duì)應(yīng)一個(gè)同名模塊。
grunt.loadNpmTasks：加載完成任務(wù)所需的模塊。
grunt.registerTask：定義具體的任務(wù)。第一個(gè)參數(shù)為任務(wù)名，第二個(gè)參數(shù)是一個(gè)數(shù)組，表示該任務(wù)需要依次使用的模塊。default任務(wù)名表示，如果直接輸入grunt命令，后面不跟任何參數(shù)，這時(shí)所調(diào)用的模塊（該例為jshint，concat和uglify）；該例的check任務(wù)則表示使用jshint插件對(duì)代碼進(jìn)行語法檢查。
5.Grunt常用插件
grunt-contrib-uglify：壓縮js代碼
grunt-contrib-concat：合并js文件
grunt-contrib-qunit：單元測(cè)試
grunt-contrib-jshint：js代碼檢查
grunt-contrib-watch：監(jiān)控文件修改并重新執(zhí)行注冊(cè)的任務(wù)
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
