Yeoman學習與實踐筆記


Yeoman是Google的團隊和外部貢獻者團隊合作開發的,他的目標是通過Grunt(一個用於開發任務自動化的命令行工具)和Bower(一個HTML、CSS、Javascript和圖片等前端資源的包管理器)的包裝為開發者創建一個易用的工作流。


Yeoman的目的不僅是要為新項目建立工作流,同時還是為了解決前端開發所面臨的諸多嚴重問題,例如零散的依賴關系。

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

下面這幅圖很形象的表明了他們三者之間的協作關系。
YOMAN的特性

閃電般的初始化:項目開始階段,可以基於現有的模板框架(例如:HTML5 Bolierplate、Twitter Bootstrap)進行項目初始化的快速構建。
了不起的構建流程:不僅僅包括JS、CSS代碼的壓縮、合並,還可以對圖片和HTML文件進行優化,同時對CoffeScript和Compass的文件進行編譯。
自動編譯CoffeScript和Compass:通過LiveReload進程可以對源文件發生的改動自動編譯,完成后刷新瀏覽器。
自動Lint代碼:對於JS代碼會自動進行JSLint測試,確保代碼符合最佳編程實踐。
內置的預覽服務器:不再需要自己配置服務器了,使用內置的就可以快速預覽。
驚人的圖片優化:通過使用OptiPNG和JPEGTran來優化圖片,減少下載損耗。
殺手級包管理:通過bower search jQuery,可以快速安裝和更新相關的文件,不再需要打開瀏覽器自己搜索了。
PhantomJS單元測試:可以非常方便的使用PhantomJS進行單元測試,一切在項目初始的時候都准備好了。

安裝前的准備工作

檢查系統中是否安裝了:Node.js、Ruby、Compass。

Mac下安裝Node.js非常方便,首頁提供了一個pkg下載,雙擊后可以默認安裝node、npm到/usr/local/bin下,我們只需要確保/usr/local/bin包含在PATH變量中就可以。

Mac Mountain Lion 下自帶了Ruby,所以也就不需要再單獨安裝了。

Compass安裝需要依賴於Ruby Gems,執行下面的步驟:
sudo gem update --system
sudo gem install compass

安裝

環境准備好之后,就可以進行安裝了,執行:
sudo npm install -g yo grunt-cli bower

安裝成功后,會看到下面的提示:
 
 
使用

執行 yo webapp 我們就可以快速的創建一個新的Web應用的框架,一個通常的工作流程如下:


項目實踐

本篇以一個實際項目為例,通過Yeoman來構建一個簡單的Blog頁面:

環境准備好之后,我們開始自己的項目開發了,首先為自己的項目准備一個目錄,我這里是: rivertown.sinaapp.com。
然后第一步,使用 yo 進行快速的初始化,初始化時會詢問我們是否使用Bootstrap和RequireJS框架,我這里都選擇了是。完成后一個Web應用的基礎框架就建立好了。

 
 
初始化的WebApp目錄結構如下,app目錄是我們項目的主目錄,test目錄中對應的一些JS的單元測試文件。
注意我們需要安裝黃色字體的提示,將npm和bower安裝到項目本地。

修改頁面文件以及樣式。

對頁面進行預覽和測試。當代碼編輯到一定程度,我們就需要對頁面進行測試了,這個時候需要Grunt派上用場,執行下面的命令:
很快,瀏覽器中就可以看到我們的頁面了。

更神奇的是,一旦我們編輯了項目源文件之后,切換到Safari窗口,就馬上能夠看到修改所帶來的變化,根本不用手工刷新頁面!
 
如果我們想對JS進行測試,那么必須利用npm將PhantomJS安裝到本地,然后執行grunt test。

最后的步驟就是編譯生成項目了,執行 grunt 就可以將項目編譯生成在 dist 目錄下,有可能生成的時候會提示 phantomjs 沒有的錯誤,這個時候執行 grunt --force 強制跳過這一步就可以了。
查看具體的main.css和main.js中的內容,可以發現里面的內容都是經過優化之后的。

使用體驗

經過一下午的試用,第一對於有這么一個集成化的構建、開發、編譯流程,感覺非常新奇,相比於傳統的開發方式。我需要首先確定用哪些框架,然后各個網站收集源代碼,進行整合,還要部署一個測試的Web服務器,不管是用(Apache、Nginx還是Xampp),最后還要做代碼的優化。而現在使用了Yeoman之后,所有的這些工作都被自動化、流程化了,我只需要按照既定的步驟來做,很多事情Yeoman都幫我做好了,對於前端開發來說,節省了非常多的力氣。而且,生成項目的代碼質量也都很不錯。

遺憾的地方在於目前Yeoman的相關資料還比較少,中文的資料也非常少,對於如何深入的學習和定制化,還需要繼續的鑽研。

PS:吐槽一下百度,不得不說對於IT工作者來說,百度真的不是一個好的選擇,輸入Yeoman,除了Infoq的兩篇介紹性的內容,其他的內容幾乎與我需要的都相隔萬里,也許是國內關注Yeoman太少的原因,但願如此。

 
參考資料:
2、 Yeoman.io
3、 Nodejs.org
4、 Compass


免責聲明!

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



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