在 Fire.app 中使用 Jade 樣板語法(以 Windows 版為例)

2014/09/06

  1. download fire.app for windows
  1. setup repo: 在你的 repo 根目錄中加入這兩個檔案
  1. 記得在你的 os 裡安裝 node.js 和 jade
  2. 按正常程序用 fire.app watch folder 
  3. 要產生 html 檔案時,用 jade 的 command line 產生

讓 Fire.app 支援 Jade 的方法 - 20140118之前舊版

20140118後新版Fire.app已經內建Jade支援,使用方式:

  1. 取得Fire.app執行檔
  1. 設定專案
    1. 到你的專案資料夾中,把根目錄下的config.rb檔案弄成這樣。跟原本的config.rb不同的地方在於多了第1-3行。
    2. 同樣在專案資料夾根目錄下,新增這個檔案。如果你的作業系統是Windows,要把第18、19行的「etblue」改成你的Windows使用者名稱。
      • 如果執行時出現找不到 jade 的錯誤訊息,但是明明已經安裝 jade 了,那麼檢查 c:/users/etblue/appdata/roaming/npm/node_modules/jade/bin/jade 這個檔案是否存在,2014/05/16 新版 jade 需要加上 .js 副檔名才能用,因此需要在 tilt_jade.rb 內把兩個用到 jade 的路徑都改成 c:/users/etblue/appdata/roaming/npm/node_modules/jade/bin/jade.js
    1. 在專案資料夾的根目錄下,開一個叫做views的資料夾,把你的.jade檔案放在裡面
    2. 在專案資料夾的根目錄下,開一個叫做public的資料夾,給Fire.app等一下輸出檔案用
    3. 把css、js、img…等資料夾,都移到public資料夾內
  2. 執行Fire.app
    1. 執行Fire-app.exe後,讓它watch你的專案資料夾,再用瀏覽器打開http://localhost:24681,就可以預覽views資料夾中的index.jade
      • 使用Jade的專案資料夾,必須是執行Fire.app後第一個watch的資料夾,如果已經先watch過別的專案,需要到Fire.app選單中按quit然後重開Fire.app
    1. 成功watch專案資料夾後,在Fire.app選單中按「build project」,所有jade、sass就會輸出成html跟css在public資料夾底下
      • 如果你的css、img檔是使用絕對路徑,那麼直接用瀏覽器開public下的html的話路徑會跑掉,要讓Fire.app改成去watch這個public資料夾才會正常。
    1. 所有專案根目錄下的資料夾都會被輸出到public中,如果有放ai工作檔之類的資料夾不需要被輸出的話,可以更改設定……(待補)

Jade 的常見 bug(i.e. 使用 Jade 的菜鳥的腦袋的常見 bug)

  1. jade 的 extend 失效了
  1. 沒辦法在 Jade 裡面寫 javascript