前端專案構建之Yeoman

轉自部落格園博主，沒找到出處，侵權刪。

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官網