上一篇介紹ruby的安裝並使用它來編譯sass,本篇就要介紹如何開始使用fire.app。
官方網站 : http://fireapp.handlino.com/
Fire.app的功能
Sass + Compass
這部分介紹了許多次,所以不再重複介紹了~。
Template languages
樣板語言,內建了Haml
/Slim
/ERB
/Markdown
格式,這些樣板功能在視覺設計師眼裡就像是indesign的主板功能,他可以定義很多預設樣式,可以有效改善編輯時的效率,而在程式設計師眼中就像是include的功能。
CoffeeScript
CoffeeScript讓javascript寫起來更直覺容易。
Auto Refresh
這功能就是同Livereload,在每次修改檔案他都會自動重新整理瀏覽器,少去了按f5的時間,減少鍵盤f5的故障率。
Build Project
在開發新專案時可以立即的建立基礎專案模板,並且在之後開啟只要輕輕點擊一下,就可以到該專案。
Cross-Platform
Fire.app可以在各系統上使用,mac、windows、Linux,都可以輕鬆執行。
正式開始
在開始之前,可能還是要花點小錢($14USD),在購買後不久就能收到軟體。本軟體不需要安裝,只要解壓縮就可以用,但建議還是解壓縮在英文目錄下比較穩定。

在一開始打開時,會出現在畫面的右下角,並且是黑色的,對他點右鍵。

選擇第一個Watch a Folder,可以試試看目前已經執行的專案,或者是簡單先做一個靜態的網頁。

在開啟後,右下角的火球會變成彩色,並且選單會有所改變,如果需要停止,只要點第一個stop XXX就可以了。

接下來馬上來測試有沒有成功,只要在網址列上輸入http://127.0.0.1:24681/
的網址,如果有出現目前的網頁就算是成功了。
Auto Refresh
這功能可以在每次存檔時重新整理瀏覽器網頁,這和livereload相同,在使用之前建議先在瀏覽器安裝擴充套件(限定chrome,firefox),本篇將用chrome做範例。

首先先到chrome線上應用程式商店,尋找LiveReload
,並且安裝。

回到剛剛http://127.0.0.1:24681/
的頁面,如果點擊右上方的圓圈,可以如圖呈現黑色,就恭喜你成功了。接下來在修改網頁後的每次存檔,你的chrome都會自動重新整理網頁。