使用 YEOMAN 加速網站開發

使用 Yeoman 加速網站開發

由於前陣子替公司架設了新版的官方網站,公司又不希望我花太多時間在這上面,於是便決定採用之前曾經在 Paul Irish 演講影片中曾經提到的 Yeoman 這個 modern workflow toolset.

另外為了將來交接給新進人員或是維護這個網站,也寫了一份投影片來介紹:

Yeoman Slide

什麼是 Yeoman ?

若是連結到 Yeoman 的官方網站,其官方的說明是:「Yeoman 不僅只是一個工具而已,它是一套工作流程,一個使得開發網站更佳便利與最佳實務的工具集」

使用前的系統要求

由於 Yeoman 是架構在 Node.js 上的一套軟體套件,故在使用之前必須先確保電腦上已經安裝好了 Node.js,如此一來便可以利用 Node.js 的套件管理工具 npm來安裝 Yeoman;另外,由於 Yeoman 是利用 git 來進行套件下載的動作,於是也必須確認電腦上是否已經安裝了 git。

如何使用 Yeoman ?

安裝 Yeoman

非常的間單,只要在 terminal 中鍵入以下指令,便完成安裝的動作:

npm install -g yo

建立 Web Application

要利用 Yeoman 來建立一個新的 web application 可以說是超級簡單,只需要使用:

yo webapp

便會在目前所在資料夾中建立一個 web app 所需要的基本文件,目前 Yeoman 利用了 component.json 這個檔案來記錄套件的資訊以及所需相依的套件名稱與版本,這樣的設計架構確保了即使未來個別的相依套件有了版本升級後,我們仍然可以利用該檔案內所記錄的版本,下載開發時所能夠正常運作的版本套件,而不致於套用到新版的套件而出錯。

bower 安裝額外的 library/framework

可以利用 bower 這個 twitter 官方所推出的套件管理工具,來安裝一些 Yeoman 預設安裝中未包含的第三方套件或框架,若不曉得 bower 是否提供該第三方組件的安裝,可以使用

bower search your_package_name

先搜尋看看是否提供該套件的安裝,若有,則可以再使用

bower install your_package_name

直接進行安裝。安裝好的套件可以在 app/componet/ 資料夾中找到。關於 bower 這個套件管理工具進一步更詳細的說明,可以參考 Package Managers: An Introductory Guide For The Uninitiated Front-End Developer 這篇文章,裡面作了相當詳盡的介紹,值得想要深入了解 bower 的讀者一探究竟。

grunt 替我們自動執行重複性的工作

在開發網頁的過程,通常我們會反覆修改一些 HTML 或是 CSS 樣式表內容,然後再更新瀏覽器看看有了什麼樣的變化;再做完修改之後,又為了優化整體網站的效能而必須作許多如 Image Optimization, Minify CSS/JavaScript Files, Concat … 等諸多的任務,若是這些任務都能夠自動化,那豈不是省下了大量的時間,讓開發者可以真正的將時間投入再真正的開發階段上,而不是花在諸如前期的環境架設、後期的修改/重新整理等等這些瑣碎耗時又沒有生產力的行為上不是嗎?

Grunt is just born for this! Grunt 便是為此而誕生的!一些我們常常必須要一再反覆執行的任務,可以透過經由編輯 Gruntfile.js 這個檔案,來設定欲執行的各項任務,往後這些任務只需要交由 Grunt 替我們去處理即可,省下大量寶貴的時間讓我們可以專注在網頁應用程式的開發上,提昇整理生產力以及增進專案的進度。

comments powered by Disqus