Yeoman安裝和使用詳解(使用grunt構建)


Yeoman安裝和使用詳解

 

一什么是Yeoman

  Yeoman幫助我們創建項目,提供更好的工具來使我們的項目更多樣化。

  Yeoman提供generator系統,一個generator是一個插件,在我們在一個完整的項目上使用‘yo’命令時,會運行該generator。通過這些官方的Generators,推出了Yeoman工作流,工作流是一個健壯、有自己特色的客戶端堆棧,包含能快速構建漂亮的網絡應用的工具和框架。Yeoman提供了負責開始項目開發的一切,沒有任何讓人頭痛的手動配置。

  采用模塊化結構,Yeoman利用從幾個開源社區網站學習到的成功和教訓,以確保棧開發人員越來越智能的進行開發。基於良好的文檔基礎以及深思熟慮的項目構建過程,Yeoman提供測試和其他更多技術,因此開發人員可以更專注於解決方案而不用去擔心其他小事。

  Yeoman主要提供了三個工具:腳手架(yo),構建工具(grunt),包管理器(bower)。這三個工具是分別獨立開發的,但是需要配合使用,來實現我們更高效的工作流模式。

二 Yeoman安裝步驟

  系統環境:win8

  1.Node.js安裝

  到Node.js官方網址下載Node.js

  安裝后驗證是否安裝成功:進入命令提示符,輸入node --verison命令

  

  安裝Node.js,會自動安裝npm,驗證npm是否安裝成功:同樣在命令提示符中輸入npm --version

  

  2.安裝git

  Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟件。Yeoman自動構建項目時會用到該軟件,所以我們先安裝好。到Git官網上下載並安裝

  選擇第二項

  3.安裝Yeoman

  在命令提示符中運行npm install -g yo grunt-cli bower

  經過幾屏的安裝信息滾動,最后你會看到安裝成功提示:

  

  4.安裝generator

  在命令提示符中輸入yo命令

  

  用上下鍵選擇install a generator,我們選擇安裝webapp generator,輸入webapp,選擇webapp

  

  接下來我們使用yeoman創建項目

  5.Yeoman使用

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

  

 

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

  

  app文件夾內目錄:

  

  6.在瀏覽器中預覽

  在命令提示符中輸入:grunt server 

  

  啟動成功

  

  如果啟動過程中,服務器報錯,可以使用強制啟動,命令為grunt server -force

  服務器啟動后,瀏覽器會自動打開並訪問:http://localhost:9000/,如下圖所示:

  

  至此,Yeoman安裝和使用講解完畢


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM