[教學] Grunt 學習筆記(2) - 打造更順暢的開發流程

2013年7月14日

前文 [教學] Grunt 學習筆記(1) - Getting Started 帶大家認識 Grunt 的基本用法,這裡我們要進一步使用 Grunt 簡化 Web 前端開發流程。
多數前端專案都會引入一些工具如 Node.js, SASS/Less/Stylus, JSHint 以提升專案品質或是可維護性,但這些工具同時也會提高開發流程的複雜度。例如一個 Stylus 專案的開發流程分解動作如下:
  • 第一動:修改 example.styl 檔案並儲存檔案
  • 第二動:執行 stylus 指令以產生 CSS 檔案: stylus [options] [command] [< in [> out]] [file|dir ...]
  • 第三動:切換至瀏覽器視窗,重新整理畫面確認結果
  • 第四動:切換至編輯器視窗,繼續編輯檔案
  • 重複第一動
重新審視這個流程後,我們發現除了編輯/存檔以外的動作其實都能交給 Grunt 自動化處理。有了 Grunt 以後,開發者就可以專心寫程式,省下不斷地切換視窗重新整理的時間與力氣。

範例專案 hello-grunt

範例專案 hello-grunt 公開在 Github 上,本文將重點放在解釋如何讓專案跑起來,對細節有興趣的人歡迎自行參考 Gruntfile.js 的寫法。

1. 下載範例專案 hello-grunt
$ git clone git@github.com:clayliao/hello-grunt.git

2. 將專案放到本地端開發目錄下,確保能使用 http://localhost/hello-grunt/ 開啓 index.html 檔。例如在 Mac 下可以使用 Symbolic link:
$ cd /Library/WebServer/Documents/
$ sudo ln -s ~/hello-grunt hello-grunt

3. 回到專案目錄下,安裝 Node.js 相依檔案:
$ cd hello-grunt
$ npm install

4. 執行 Grunt,此時 Grunt 會監控 lib/*.styl 檔案與 *.html 檔案,一旦這些檔案被修改過就會作出相對應的動作(例如執行 stylus command)並且通知瀏覽器重新整理。
$ grunt

安裝 Livereload 瀏覽器外掛

Livereload 的主要功能是通知瀏覽器重新整理畫面 ,這個方便的功能已經被整合在 grunt-contrib-watch plugin 中。
Livereload 支援多數主流瀏覽器。以 Chrome 瀏覽器為例,下載並安裝完成後右上角會出現 Livereload 的小圖示,滑鼠點擊小圖示即可啓動 Livereload(請再次確認 $ grunt 正在執行 中,否則會出現錯誤訊息)

體驗全新的開發流程

準備工作就緒後,就讓我們來親身體驗 Grunt 帶來的好處。首先使用編輯器開啓 example.styl 並且試著改變網頁中 <h1> 標題的顏色。起初 <h1> 標題預設是黑色的:

接下來我們試著將顏色改為紅色(存檔後請務必讓雙手離開鍵盤,用心感受一下這個 moment)。此時 Grunt 偵測到了 lib/example.styl 檔案被修改過,於是自動執行 stylus command 編譯新的 CSS 檔案:

編譯成功後,瀏覽器馬上自動重新整理,並且 <h1> 標題也被改成紅色了!另外也可以修改 index.html 的文字內容,您會發現瀏覽器幾乎能夠同步更新內容:


小結

專案 hello-grunt 是簡化過的範例,目的是要展示如何使用 Grunt 將重複的動作自動化,讓開發流程變得更流暢。您可以視需求將 Stylus 換成 SASS/Less,也可以發掘更多的 Grunt 外掛讓自己更上一層樓。

0 意見 :

Related Posts Plugin for WordPress, Blogger...