一、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 特性:
- 快速創建骨架應用程序——使用可自定義的模板(例如:HTML5、Boilerplate、Twitter Bootstrap等)、AMD(通過RequireJS)以及其他工具輕松地創建新項目的骨架。
- 自動編譯 CoffeeScrip 和 Compass——在做出變更的時候,Yeoman 的 LiveReload 監視進程會自動編譯源文件,并刷新瀏覽器,而不需要你手動執行。
- 自動完善你的腳本——所有腳本都會自動針對 JSHint 運行,從而確保它們遵循語言的最佳實踐。
- 內建的預覽服務器——你不需要啟動自己的 HTTP 服務器。內建的服務器用一條命令就可以啟動。
- 非常棒的圖像優化——使用 OptPNG 和 JPEGTran 對所有圖像做了優化。
- 生成 AppCache 清單——Yeoman 會為你生成應用程序緩存的清單,你只需要構建項目就好。
- “殺手級”的構建過程——你所做的工作不僅被精簡到最少,讓你更加專注,為你節省大量工作。
- 集成的包管理——Yeoman 讓你可以通過命令行輕松地查找新的包,安裝并保持更新,而不需要你打開瀏覽器。
- 對ES6模塊語法的支持——你可以使用最新的 ECMAScript 6 模塊語法來編寫模塊。這還是一種實驗性的特性,它會被轉換成 eS5,從而你可以在所有流行的瀏覽器中使用編寫的代碼。
- PhantomJS單元測試——你可以通過 PhantomJS 輕松地運行單元測試。當你創建新的應用程序的時候,它還會為你自動創建測試內容的骨架。
二、安裝
這里以 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
安裝完畢后,會看到以下提示:
?
三、使用
1、創建工程
安裝好 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
2、啟動工程服務
Yeoman 內置 Node 服務。啟動命令:
?grunt server
服務啟動后會自動打開瀏覽器訪問http://localhost:9000/(端口號可以在 gruntfile.js 中配置),然后工程服務會監聽工程目錄下的預編譯文件,一旦發生改變就自動編譯并刷新瀏覽器。比如我們修改工程下的 main.scss 文件,工程服務就會開始運作:
?
3、運行測試框架
Yeoman 內置 mocha 測試框架,在 PhantomJS 環境下進行測試,測試命令:
grunt test
?
運行完畢后可以在工程里的 test 目錄找到測試報告。
至此 Yeoman 的部署就完成了。接下來就是自定義一套工程模板。
參考文章
http://yeoman.io/index.html
http://www.36ria.com/6144