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

編輯歷史

時間	作者	版本
2014-09-06 07:03 – 07:12	ET Blue	r1137 – r1288
顯示 diff 在 Fire.app 中使用 Jade 樣板語法（以 Windows 版為例） Linux 跟 Mac 請以此類推... XD + + 2014/ + 9/ + 6 + download fire.app for windows + https://app.box.com/s/mb01rj6xuje4k3crz57h + setup repo: 在你的 repo 根目錄中加入這兩個檔案 + https://github.com/hackfoldr/hackfoldr-2.0/blob/gh-pages/config.rb + https://github.com/hackfoldr/hackfoldr-2.0/blob/gh-pages/tilt_jade.rb + https://github.com/hackfoldr/hackfoldr-2.0/blob/gh-pages/tilt_jade.rb#L20 修改路徑 + https://github.com/hackfoldr/hackfoldr-2.0/blob/gh-pages/tilt_jade.rb#L21 修改路徑 + mac: try this https://gist.github.com/tka/5302996#file-http_servlet_handler-rb-for-mac 不過……我問一下好了等等 XD + 記得在你的 os 裡安裝 node.js 和 jade + 按正常程序用 fire.app watch folder + 要產生 html 檔案時，用 jade 的 command line 產生 + *例： jade . -o . + 讓 Fire.app 支援 Jade 的方法 - 20140118之前舊版（26 行未修改）
2014-05-16 01:55 – 01:58	ET Blue	r1078 – r1136
顯示 diff （11 行未修改）到你的專案資料夾中，把根目錄下的config.rb檔案弄成這樣。跟原本的config.rb不同的地方在於多了第1-3行。同樣在專案資料夾根目錄下，新增這個檔案。如果你的作業系統是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 在專案資料夾的根目錄下，開一個叫做views的資料夾，把你的.jade檔案放在裡面 *在專案資料夾的根目錄下，開一個叫做public的資料夾，給Fire.app等一下輸出檔案用（14 行未修改）
2014-02-16 15:38 – 15:39	ET Blue	r1071 – r1077
顯示 diff （7 行未修改）方法一：購買Fire.app 方法二：從github抓下來自己compile - 方法三：找認識的人要檔案 + 方法三：參加 g0v 專案或找認識的人要檔案設定專案到你的專案資料夾中，把根目錄下的config.rb檔案弄成這樣。跟原本的config.rb不同的地方在於多了第1-3行。（17 行未修改）
2014-01-18 09:55 – 09:56	ET Blue	r1065 – r1070
顯示 diff （26 行未修改）已知原因：我的某個 .jade 的 html attribute 用空白分隔，沒有改成 , 分隔（茶茶）沒辦法在 Jade 裡面寫 javascript - 現在已經內建了，不需要再hack，使用方式請見上面步驟 XD + 現在已經內建了，不需要再hack，使用方式請見上面步驟，這裡的原本內容已移至舊版文件
2014-01-18 09:55	(unknown)	r1064
顯示 diff （29 行未修改）
2014-01-18 09:51 – 09:55	ET Blue	r1059 – r1063
顯示 diff （10 行未修改）設定專案到你的專案資料夾中，把根目錄下的config.rb檔案弄成這樣。跟原本的config.rb不同的地方在於多了第1-3行。 - 同樣在專案資料夾根目錄下，新增這個檔案。如果你的作業系統是Windows，要把第19、2 - 行的「etblue」改成你的Windows使用者名稱。 + 同樣在專案資料夾根目錄下，新增這個檔案。如果你的作業系統是Windows，要把第18、19行的「etblue」改成你的Windows使用者名稱。在專案資料夾的根目錄下，開一個叫做views的資料夾，把你的.jade檔案放在裡面在專案資料夾的根目錄下，開一個叫做public的資料夾，給Fire.app等一下輸出檔案用（11 行未修改）已知原因：我的某個 .jade 的 html attribute 用空白分隔，沒有改成 , 分隔（茶茶）沒辦法在 Jade 裡面寫 javascript - 現在已經內建了，不需要再hack，使用方式請見上面步驟 XD指已知原因：Jade 裡的 js 是 for client side use，被 Jade 包起來了，不能和外界溝通 - 解法： - Fire.app 內 - 找到根目錄下、之前設定的 http_servlet_handler.rb - 把「body = Open3.popen3('node c:/users/etblue/appdata/roaming/npm/node_modules/jade/bin/jade --path . "') do \|stdin, stdout, stderr\|」這一行 - 改成「body = Open3.popen3('node c:/users/etblue/appdata/roaming/npm/node_modules/jade/bin/jade --path . -O "{require: require}"') do \|stdin, stdout, stderr\|」 - 兩者差別在於加入了粗體底線的部分，意思是叫 Jade 把 .jade 檔案裡面的 require 這個關鍵字（第一個 require）當作是 javascript 執行環境裡的 require 這個 function（第二個 require）來解讀，這樣一來，在 .jade 裡面寫的 js code 的 require 關鍵字才會生效。 - Jade command - 由於 Fire.app 目前還沒有 build .jade 檔案的功能，所以必須開 command line 下指令把 .jade 變成 html，才能 push 到 gh-pages 上面給大家看 - 指令： - cd src - 移動到放 .jade 檔案的資料夾位置，我的 .jade 是放在 src/ 裡面，所以移到 src - jade -o .. -O '{require: require}' . - 叫 Jade 把這個目錄裡（.）的 .jade 檔案 compile 成 html（-o）丟到上一層目錄（..）中，並且把 .jade 檔案裡面的 require 關鍵字解讀成 javascript 的 require function（-O '{require: require}'） + 現在已經內建了，不需要再hack，使用方式請見上面步驟 XD
2014-01-17 20:34 – 21:45	ET Blue	r518 – r1058
顯示 diff - 讓 Fire.app 支援 Jade 的方法 - - 讓 Fire.app 支援 Jade 的方法（Windows 7 版） + 在 Fire.app 中使用 Jade 樣板語法（以 Windows 版為例） Linux 跟 Mac 請以此類推... XD - 用 command prompt 安裝 Jade - 按 Windows 鍵 - 出現開始功能表，游標會自動出現在下方搜尋框 - 輸入 cmd 後按 enter - 找到 cmd.exe （也就是 command prompt）並執行它 - 在 command prompt 裡輸入 npm install -g jade 後按 enter - 會自動上網抓 Jade 的程式並安裝它，要跑一小下子 - 製作 Fire.app 的 Jade 設定檔 - 打開檔案總管，移動到需要使用 Jade 的專案的資料夾 - 在專案資料夾根目錄空白的地方按「滑鼠右鍵→新增→純文字檔案」 - 檔名設定成 http_servlet_handler.rb （注意副檔名要改成 .rb，不是 .txt） - 如果看不到副檔名，在檔案總管按 Alt + F 叫出功能選單，選「工具→資料夾選項」，再選檢視分頁，找到「隱藏已知檔案的副檔名」取消打勾，然後按「確定」 - 連到 https://gist.github.com/tka/5302996 https://gist.github.com/tka/5302996/#comment-931517 網頁 - 這是 https://gist.github.com/tka/5302996#comment-854085 加了幾個字的版本，讓 /src 資料夾中的 .jade 檔案可以在 localhost 根目錄預覽，網址不用加 /src - 往下捲一點，找到 http_servlet_handler.rb for windows 這一段 - 把內容複製後貼到剛才新增的 http_servlet_handler.rb 文字檔中，存檔 - 測試 - 在專案資料夾根目錄裡新增空白的文字檔，檔名叫 foo.jade - 打開 Fire.app - 跑完以後程式 icon 會出現在開始列的通知區，剛打開時 icon 黑色的 - 按下 Fire.app icon，選 watch folder... 後選專案資料夾的位置 - watch 後 fire.app 的 icon 會變成彩色的 - 如果原本已經在 watch folder 中，先 stop watching 然後再重新 watch 一次 - 連到 http://127.0.0.1:24681/foo.jade - 網頁一片空白沒有錯誤訊息，就表示成功了 :D + 讓 Fire.app 支援 Jade 的方法 - 20140118之前舊版 - Jade 的常見 bug（i.e. 使用 Jade 的菜鳥的腦袋的常見 bug） + 2014 + 118後新版Fire.app已經內建Jade支援，使用方式： + 取得Fire.app執行檔 + 方法一：購買Fire.app + 方法二：從github抓下來自己compile + 方法三：找認識的人要檔案 + 設定專案 + 到你的專案資料夾中，把根目錄下的config.rb檔案弄成這樣。跟原本的config.rb不同的地方在於多了第1-3行。 + 同樣在專案資料夾根目錄下，新增這個檔案。如果你的作業系統是Windows，要把第19、2 + 行的「etblue」改成你的Windows使用者名稱。 + 在專案資料夾的根目錄下，開一個叫做views的資料夾，把你的.jade檔案放在裡面 + 在專案資料夾的根目錄下，開一個叫做public的資料夾，給Fire.app等一下輸出檔案用 + 把css、js、img…等資料夾，都移到public資料夾內執行Fire.app + + 執行Fire-app.exe後，讓它watch你的專案資料夾，再用瀏覽器打開http://localhost:24681，就可以預覽views資料夾中的index.jade + 使用Jade的專案資料夾，必須是執行Fire.app後第一個watch的資料夾，如果已經先watch過別的專案，需要到Fire.app選單中按quit然後重開Fire.app + 成功watch專案資料夾後，在Fire.app選單中按「build project」，所有jade、sass就會輸出成html跟css在public資料夾底下 + 如果你的css、img檔是使用絕對路徑，那麼直接用瀏覽器開public下的html的話路徑會跑掉，要讓Fire.app改成去watch這個public資料夾才會正常。 + 所有專案根目錄下的資料夾都會被輸出到public中，如果有放ai工作檔之類的資料夾不需要被輸出的話，可以更改設定……（待補）Jade 的常見 bug（i.e. 使用 Jade 的菜鳥的腦袋的常見 bug） jade 的 extend 失效了 - 原本好好的，突然之間網頁預覽畫面變成一片空白 + 原原本好好的，突然之間網頁預覽畫面變成一片空白已知原因：我的 block 名稱寫錯了（茶）出現莫名其妙的錯誤訊息，但看不出錯誤源頭（linux 底下 tka 遇到的）已知原因：我的某個 .jade 的 html attribute 用空白分隔，沒有改成 , 分隔（茶茶）沒辦法在 Jade 裡面寫 javascript - 已知原因：Jade 裡的 js 是 for client side use，被 Jade 包起來了，不能和外界溝通 + 現在已經內建了，不需要再hack，使用方式請見上面步驟 XD指已知原因：Jade 裡的 js 是 for client side use，被 Jade 包起來了，不能和外界溝通解法： *Fire.app 內（11 行未修改）
2013-12-01 08:53 – 09:31	ET Blue	r78 – r517
顯示 diff （28 行未修改）網頁一片空白沒有錯誤訊息，就表示成功了 :D - Jade 的常見 bug（i.e. 使用 Jade 的人的腦袋的常見 bug） - jade 的 extend 突然失效的原因是我的 block 名稱寫錯了 + Jade 的常見 bug（i.e. 使用 Jade 的菜鳥的腦袋的常見 bug） + jade 的 extend 失效了 + 原本好好的，突然之間網頁預覽畫面變成一片空白 + 已知原因：我的 block 名稱寫錯了（茶） + 出現莫名其妙的錯誤訊息，但看不出錯誤源頭（linux 底下 tka 遇到的） + 已知原因：我的某個 .jade 的 html attribute 用空白分隔，沒有改成 , 分隔（茶茶） + 沒辦法在 Jade 裡面寫 javascript + 已知原因：Jade 裡的 js 是 for client side use，被 Jade 包起來了，不能和外界溝通 + 解法： + Fire.app 內 + 找到根目錄下、之前設定的 http_servlet_handler.rb + 把「body = Open3.popen3('node c:/users/etblue/appdata/roaming/npm/node_modules/jade/bin/jade --path . "') do \|stdin, stdout, stderr\|」這一行 + 改成「body = Open3.popen3('node c:/users/etblue/appdata/roaming/npm/node_modules/jade/bin/jade --path . -O "{require: require}"') do \|stdin, stdout, stderr\|」 + 兩者差別在於加入了粗體底線的部分，意思是叫 Jade 把 .jade 檔案裡面的 require 這個關鍵字（第一個 require）當作是 javascript 執行環境裡的 require 這個 function（第二個 require）來解讀，這樣一來，在 .jade 裡面寫的 js code 的 require 關鍵字才會生效。 + Jade command + 由於 Fire.app 目前還沒有 build .jade 檔案的功能，所以必須開 command line 下指令把 .jade 變成 html，才能 push 到 gh-pages 上面給大家看 + 指令： + cd src + 移動到放 .jade 檔案的資料夾位置，我的 .jade 是放在 src/ 裡面，所以移到 src + jade -o .. -O '{require: require}' . + *叫 Jade 把這個目錄裡（.）的 .jade 檔案 compile 成 html（-o）丟到上一層目錄（..）中，並且把 .jade 檔案裡面的 require 關鍵字解讀成 javascript 的 require function（-O '{require: require}'）
2013-12-01 08:53	(unknown)	r77
顯示 diff （32 行未修改）
2013-12-01 08:53 – 08:53	ET Blue	r50 – r76
顯示 diff （28 行未修改） *網頁一片空白沒有錯誤訊息，就表示成功了 :D - J + Jade 的常見 bug（i.e. 使用 Jade 的人的腦袋的常見 bug） + jade 的 extend 突然失效的原因是我的 block 名稱寫錯了
2013-12-01 08:53	(unknown)	r49
顯示 diff （31 行未修改）
2013-12-01 08:52 – 08:53	ET Blue	r47 – r48
顯示 diff （27 行未修改）連到 http://127.0.0.1:24681/foo.jade 網頁一片空白沒有錯誤訊息，就表示成功了 :D + + J
2013-10-18 07:43 – 07:45	ET Blue	r4 – r46
顯示 diff （14 行未修改）檔名設定成 http_servlet_handler.rb （注意副檔名要改成 .rb，不是 .txt）如果看不到副檔名，在檔案總管按 Alt + F 叫出功能選單，選「工具→資料夾選項」，再選檢視分頁，找到「隱藏已知檔案的副檔名」取消打勾，然後按「確定」 - 連到 https://gist.github.com/tka/5302996 網頁 + 連到 https://gist.github.com/tka/5302996 https://gist.github.com/tka/5302996/#comment-931517 網頁 + 這是 https://gist.github.com/tka/5302996#comment-854085 加了幾個字的版本，讓 /src 資料夾中的 .jade 檔案可以在 localhost 根目錄預覽，網址不用加 /src 往下捲一點，找到 http_servlet_handler.rb for windows 這一段 *把內容複製後貼到剛才新增的 http_servlet_handler.rb 文字檔中，存檔（9 行未修改）
2013-08-05 18:05 – 18:05	ET Blue	r2 – r3
顯示 diff + 讓 Fire.app 支援 Jade 的方法 + 讓 Fire.app 支援 Jade 的方法（Windows 7 版） *Linux 跟 Mac 請以此類推... XD （24 行未修改）
2013-08-05 18:05 – 18:05	(unknown)	r0 – r1
顯示 diff - + 讓 Fire.app 支援 Jade 的方法（Windows 7 版） + Linux 跟 Mac 請以此類推... XD + 用 command prompt 安裝 Jade + 按 Windows 鍵 + 出現開始功能表，游標會自動出現在下方搜尋框 + 輸入 cmd 後按 enter + 找到 cmd.exe （也就是 command prompt）並執行它 + 在 command prompt 裡輸入 npm install -g jade 後按 enter + 會自動上網抓 Jade 的程式並安裝它，要跑一小下子 + 製作 Fire.app 的 Jade 設定檔 + 打開檔案總管，移動到需要使用 Jade 的專案的資料夾 + 在專案資料夾根目錄空白的地方按「滑鼠右鍵→新增→純文字檔案」 + 檔名設定成 http_servlet_handler.rb （注意副檔名要改成 .rb，不是 .txt） + 如果看不到副檔名，在檔案總管按 Alt + F 叫出功能選單，選「工具→資料夾選項」，再選檢視分頁，找到「隱藏已知檔案的副檔名」取消打勾，然後按「確定」 + 連到 https://gist.github.com/tka/5302996 網頁 + 往下捲一點，找到 http_servlet_handler.rb for windows 這一段 + 把內容複製後貼到剛才新增的 http_servlet_handler.rb 文字檔中，存檔 + 測試 + 在專案資料夾根目錄裡新增空白的文字檔，檔名叫 foo.jade + 打開 Fire.app + 跑完以後程式 icon 會出現在開始列的通知區，剛打開時 icon 黑色的 + 按下 Fire.app icon，選 watch folder... 後選專案資料夾的位置 + watch 後 fire.app 的 icon 會變成彩色的 + 如果原本已經在 watch folder 中，先 stop watching 然後再重新 watch 一次 + 連到 http://127.0.0.1:24681/foo.jade + *網頁一片空白沒有錯誤訊息，就表示成功了 :D