各位好啊，我又和大家見面了，也許你已經不記得大明湖畔的容嬤嬤，但是只要記得博客園中的我就好，希望我的博客能像一股清風，為你驅散炎熱的酷暑，好了，廢話不多說，開始上乾貨，我今天帶給大家的是前端工程化開發yeoman，bower ,grunt .

關於這三個工具在這裡就不過多介紹了，沒有用過的散仙們可以自行訪問各自的官網進行瞭解

1. yeoman(腳手架工具）：http://yeoman.io/
2. bower(包管理工具）：http://bower.io/

3. grunt(構建工具）：http://www.gruntjs.net/

   一：準備工作

   由於這三個工具都是需要利用npm包下載的，所以需要安裝node.js進入到node.js官網https://nodejs.org/en/你會看到兩個綠色的大按鈕，選擇穩定版本的node.js安裝就行，安裝過程就不細說了，全程傻瓜式安裝，下一步，下一步。。就行了，當你安裝完node的時候，說明我們已經成功了三分之一，還有三分之二需要我們去完成。剩下的三分之二也是本次講解的乾貨，希望對各位能夠有所幫助。好了，乾貨走起，敵軍還有三十秒到達戰場，碾碎他們。

   1.安裝完node後打開終端輸入node -v 出現下圖則說明安裝成功。

2.安裝git

Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。Yeoman自動構建項目時會用到該軟體，所以我們先安裝好。到Git官網http://git-scm.com/download/上下載並安裝，安裝過程和node一樣遵循傻瓜式安裝

3.安裝yeoman,grunt,bower
　在命令提示符中運行npm install -g yo grunt-cli bower

4.安裝generator在命令行輸入yo

5.使用yeoman構建項目，俗話說養兵xx，用兵xx，（ps:原諒我語文是體育老師教的，忘記那句話咋說的了）

　　創建一個工作目錄，用於存放Yeoman項目。我在D盤下新建Angular的app工作目錄,命令行進入，輸入yo命令,用上下鍵選擇webapp

這裡我們不選擇Sass，因為需要Sass的話運行環境是Ruby，在windows下配置會非常麻煩；選擇bootstrap；不選擇Modernizr；點擊回車，經過幾屏的信息滾動後，會提示項目構建完成，文件目錄如下：

app 為項目主目錄，是部署的根目錄

node_modules 為 nodejs的包文件

test 為測試目錄，專門用於單元測試，用的是 mocha 來測試

Gruntfile.js 是配置 grunt 自動化任務的配置文件，具體配置可以參考下 Grunt官網

就這樣，一個項目就搭建好了，下一次我將會為大家詳細說明grunt 的用法，這個是重點，難點，拿著筆點著字 這個考試要考的。。（哈哈本章節到此結束，欲知後事如何，敬請期待下集）順便推廣下一個前端開發群474471759

如果有錯，請大神及時反饋給我，不要讓我錯下去，謝謝！敬禮