前端工程構建工具——Yeoman

1、Yeoman 簡介

一般在開發新項目時咱們都須要配置工程環境，開發目錄，須要下載一些庫、框架文件（如 jQuery、Backbone 等），配置編譯環境（Less、Sass、Coffeescript等），甚至還要配置單元測試框架，過程很是繁瑣，還沒開始編碼時間就耗了大半天。爲了解決這個問題 Paul Irish、Addy Osmani、Sindre Sorhus、Mickael Daniel、Eric Bidelman 和 Yeoman 社區共同開發的一個項目——Yeoman。

 

Yeoman 是由三個工具的組成：YO、GRUNT、BOWER

YO：Yeoman核心工具，項目工程依賴目錄和文件生成工具，項目生產環境和編譯環境生成工具。

GRUNT：前端構建工具，jQuery就是使用這個工具打包的。

BOWER：Web 開發的包管理器，概念上相似 npm，npm 專一於 NodeJs 模塊，而 bower 專一於 CSS、JavaScript、圖像等前端相關內容的管理。

Yeoman 特性：

• 快速建立骨架應用程序——使用可自定義的模板（例如：HTML五、Boilerplate、Twitter Bootstrap等）、AMD（經過RequireJS）以及其餘工具輕鬆地建立新項目的骨架。
• 自動編譯 CoffeeScrip 和 Compass——在作出變動的時候，Yeoman 的 LiveReload 監視進程會自動編譯源文件，並刷新瀏覽器，而不須要你手動執行。
• 自動完善你的腳本——全部腳本都會自動針對 JSHint 運行，從而確保它們遵循語言的最佳實踐。
• 內建的預覽服務器——你不須要啓動本身的 HTTP 服務器。內建的服務器用一條命令就能夠啓動。
• 很是棒的圖像優化——使用 OptPNG 和 JPEGTran 對全部圖像作了優化。
• 生成 AppCache 清單——Yeoman 會爲你生成應用程序緩存的清單，你只須要構建項目就好。
• 「殺手級」的構建過程——你所作的工做不只被精簡到最少，讓你更加專一，爲你節省大量工做。
• 集成的包管理——Yeoman 讓你能夠經過命令行輕鬆地查找新的包，安裝並保持更新，而不須要你打開瀏覽器。
• 對ES6模塊語法的支持——你能夠使用最新的 ECMAScript 6 模塊語法來編寫模塊。這仍是一種實驗性的特性，它會被轉換成 eS5，從而你能夠在全部流行的瀏覽器中使用編寫的代碼。
• PhantomJS單元測試——你能夠經過 PhantomJS 輕鬆地運行單元測試。當你建立新的應用程序的時候，它還會爲你自動建立測試內容的骨架。

2、安裝

這裏以 OSX 上的安裝爲例，先來看下 Yeoman 的安裝環境要求：

• NodeJS >= 0.8.x
• Ruby >= 1.8.7
• Compass >= 0.12.1
• optipng
• jpegtran
• PhantomJS >= 1.6

在 OSX 上 Ruby 是內置的，因此只須要手動配置下其它服務：

• NodeJS 安裝請直接去官網下載 .pkg 安裝包進行安裝（Homebrew 安裝的 NodeJS 會有問題，沒法運行 Yeoman 命令）
• Compass 能夠使用 Ruby 自帶的包管理工具安裝：
    $gem install compass
• 其他的 optipng、jpegtran、PhantomJS 能夠經過 Homebrew 安裝，若是已經安裝了 Xcode 那麼 Xcode CLI Tools 就已經內置。

開始安裝 Yeoman：

npm install -g yo grunt-cli bower

遇到權限問題請加sudo

安裝完畢後，會看到如下提示：

 

3、使用

一、建立工程

安裝好 Yeoman 後，就能夠經過命令來新建工程，首先新建一個工程目錄，好比 demo，首先建立 demo 目錄而後在該下鍵入命令：

yo webapp

這時 Yeoman 會詢問一些配置設置（這裏所有選擇了 Yes），以後就開始自動建立工程。

 

工程建立完畢後就能夠看到 demo 目錄下已經生成了許多目錄及文件，這時開發所需的環境就搭建好了，能夠開始編碼了。

 

webapp 實際上是 Yeoman 內置的工程模板，它整合了 html5 Boilerplate、jquery、Modernizr、Bootstrap、RequireJS 等框架或庫文件，使咱們建立完後就能直接使用。除了generator-webapp 還有一個 generator-mocha、generator-backbone、generator-angular等工程模板，能夠經過npm search yeoman-generator命令查找，而後使用npm install [name]來安裝。

若是工程中須要其它類庫，也能夠使用命令方便的添加，例如添加 underscore：

bower install underscore

二、啓動工程服務

Yeoman 內置 Node 服務。啓動命令：

 grunt server

服務啓動後會自動打開瀏覽器訪問http://localhost:9000/（端口號能夠在 gruntfile.js 中配置），而後工程服務會監聽工程目錄下的預編譯文件，一旦發生改變就自動編譯並刷新瀏覽器。好比咱們修改工程下的 main.scss 文件，工程服務就會開始運做：

 

三、運行測試框架

Yeoman 內置 mocha 測試框架，在 PhantomJS 環境下進行測試，測試命令：

grunt test

 

運行完畢後能夠在工程裏的 test 目錄找到測試報告。

至此 Yeoman 的部署就完成了。接下來就是自定義一套工程模板。

參考文章

http://yeoman.io/index.html

http://www.36ria.com/6144