demoshop

官方網站

http://fireapp.handlino.com/

大家好，黃米奧的勸敗文又來了！
之前寫了三篇compass.app的相關介紹文，不知道是否有人已經體會到它的好用之處？
開發compass.app的Handlino公司在上個月又推出了新的工具應用程式「Fire.app」，和compass.app一樣跨平台在Windows、Mac、Linux都可以使用。
如果你的工作需要把一系列設計好的版型做成一個網站(俗稱..切版，這名詞真的很俗。)那絕對不能錯過這項工具。

有使用過 compass.app 或看過介紹的人應該知道它的影響範圍僅限於專案的 css 部分，並不會處理其他類型的檔案。
相對於 compass.app 而言，Fire.app的影響範圍則擴大到整個專案，
不只和 compass.app 一樣可以使用 SCSS/compass 來寫 css ，還可以利用樣板語言搭配 layout 、 partial 使整個網站在製作 prototype 的階段就省掉很多本來非重複寫很多次不可的部份。
也可以使用 helper 來簡化一些複雜的需求；甚至想要的話也可以使用現在很夯的 coffeescript …
再度白話一點的說的話和 compass.app 一樣是：「可以用很多方便的寫法讓本來需要寫超多次的東西變成寫一次就好了唷！」
至於做好的東西能不能簡單的讓別人接手？當然是可以！
下面同樣從如何開始使用來說明 Fire.app 的過人之處。

因為這裡的讀者大部分都是 Windows 的使用者，以下同樣用 Windows 來示範。

---

和 compass.app 一樣，購買之後可以得到下載連結，下載完解壓縮放到自己想放的位置即可，同樣可以把執行檔設成捷徑方便使用； Mac 版本則把 app 檔案放進應用程式即可。開啟Fire.app後可以看見出現一個黑色的火球 icon：

---

想建立新專案時，點擊Fire.app的icon，滑鼠指向「Create Project」便可以看見可以建立專案的類型選項，
和 compass.app 一樣支援許多類型的 framework 、 template ，
如果想看看 Fire.app 的使用範例，可以選擇「 Fireapp Example 」便會建立出一整個範例專案供參考。
若是不需要參考範例的話可以和使用 compass.app 一樣選擇「compass > project 」即可。

產出的專案內容物會和使用 compass.app 時一樣，也會跳出成功建立專案的畫面，
Fireapp 的小 icon 此時會轉變成有在 Watch 專案的狀態，從黑色變成彩色的，
接下來便可以針對此專案試著調整自己喜歡的設定值。

---

截至目前為止大概都跟 compass.app 沒有兩樣，也可以像使用 compass.app 一樣的方式使用。
不過..如果這樣使用 Fire.app 的話就太浪費了！
Fire.app 的強處在於可以使用樣板語言搭配 layout/partial/helper 來達成需求，
但是要使用這些便需要先調整一下使用方式，因為這些語法必須要在 server 上才能執行，
一般人電腦裡當然沒有架什麼 server ..所以 Fire.app 也貼心的提供了內建的 Web Server，
只要打開 Preference 裡面「 Services 」的 tab，勾選「 Enable Web Server 」就可以了，
預設的 port 是 24681，當然也可以修改成自己想要的port。

---

設定完之後就可以寫一個內容隨意的 index.html 進專案資料夾，然後照設定值在瀏覽器的網址列輸入：「http://127.0.0.1:24681」，如果可以看見自己寫入的內容便可以確定Web Server正常執行囉。

---

基本上使用 Fire.app 作業時便是透過 Web Server 來預覽網站的狀態，
當完成後的專案要讓別人接手時，若對方並非寫 rails 的工程師而只想要單純的 css+html 頂多加上 javascript 的版本，
那就要點擊 Fire.app 的 icon 後選擇「 Build Project 」，
這個功能會把整個專案產出一份能夠放在server上執行的靜態版本。
特別需要注意的是由於預設狀況下產出的東西都是要放在 server 上執行的，所以使用的是絕對路徑。
若不透過 server 進行網頁單檔的瀏覽，像圖檔等部分使用絕對路徑便會發生找不到檔案的狀況，
如果有這樣的需求，則要在「 config.rb 」檔案中修改「 relative_assets 」的部份，修改成：

relative_assets = true

存檔後再重新執行一次「Build Project」即可。

以上就是 Fire.app 基本的使用流程，省略了很多和 compass.app 相同的部份，
如果沒有使用過 compass.app 而不熟悉的人可以參考之前的compass.app 介紹文，
關於 Fire.app 的神奇寫法因為內容很多所以寫在下一篇， 想深入了解的人可以參考Fire.app 官網上的說明和文件。