無分類雜文 15 Jul 2010 04:37 pm
|
推到 Twitter!
推到 Plurk!
|
LiveReload：你的套版好幫手！
網頁設計師或者是程式設計師，無可避免的日常一定會遇到「切版」/「套版」的工作。做這些工作時，遇到最討厭的煩人事，除了「測各大瀏覽器相容性」，莫過於「邊切邊套按 Reload 重新整理瀏覽器整理到手抽筋」…。
要是檔案一變更，瀏覽器能自動更新就好了？
這個願望從前只有在 Firefox 上的 firebug （或者一些 js console）上能夠實現，而且也僅止於暫時修改 html/css/js 預覽結果的用途。
這個問題，最近被 LiveReload 這個 rubygem 解決了！
在開始使用 LiveReload 前，你可以先觀看由 EnvyLabs 拍攝的示範影片，了解使用方式。相信我，裝了它之後你就會愛上它了。
LiveReload 的特點有：
1. 更改 CSS 以及 JavaScript 類檔案時，存檔可以所見即所得（不需 reload page）。
2. 更改 HTML 或者其他 server-side script ( Ruby / PHP / Python 等等…），存檔時也可以所見即所得（瀏覽器會自動 reload）。
所以當你螢幕夠大時，一邊開瀏覽器一邊開編輯器寫 code 測試，搭配上 LiveReload，切版 / 套版速度會馬上大大的暴增！
有些人也許會好奇 LiveReload 的運作原理是什麼？
基本上 LiveReload 就是一個 directory watcher，透過設定工作目錄底下的 .livereload 檔下的檔案類型，執行 livereload 後，它會自動 watch 裡面的更動。它同時也自帶一個 http server，開發者安裝了它的 browser plugin ( Chrome / Safari supported )，client 與 server 連接起來。當目錄裡檔案更動時，browser 就自動 reload。
首次執行時不需要設定任何 .livereload 檔，執行後會自動產生…
預設會 watch 這一些類型的檔案。
Watching: /Users/xdite/projects/playgame
- extensions: .html .css .js .png .gif .jpg .php .php5 .py .rb .erb
- excluding changes in: */.git/* */.svn/* */.hg/*
如果你有其他的需要，可以修改 .livereload 檔，exclude 或 extend。
至於執行平台方面，Mac 當然是完全沒問題。它也提供了 Linux 與 Windows solution…不過這方面我就沒有測試過了，也許大家可以玩玩看 
如果都不能用，那就買台 Mac 加入使用 Mac 的行列吧！XD
This
work is licensed under a
Creative Commons Attribution-Share Alike 2.5 Taiwan License.
[本文採 cc-by-sa 授權，白話意思就是可以直接轉走，但是要附出處與作者）]
5 Responses to “LiveReload：你的套版好幫手！”
on 15 Jul 2010 at 6:40 pm 1.Tweets that mention Blog.XDite.net » LiveReload：你的套版好幫手！ -- Topsy.com said …
[...] This post was mentioned on Twitter by Roamlog Lee (漫步), Brecht and Lu, Jye, Yuan Ping Wu. Yuan Ping Wu said: Blog.XDite.net » LiveReload：你的套版好幫手！ http://bit.ly/9W32zS 酷！ [...]
on 15 Jul 2010 at 10:01 pm 2.othree said …
重點：「所以當你螢幕夠大時」
on 16 Jul 2010 at 12:15 pm 3.Leon said …
這資訊幫了我大忙, 十分感謝！
on 19 Jul 2010 at 1:23 am 4.漫畫迷 said …
你的blog不錯,加油,有空歡迎你也來逛逛我的blog,thanks
我的blog在 http://jokemuch.blogspot.com/ ,我畫了些好笑的漫畫,請指教
on 10 Aug 2010 at 9:44 pm 5.scriptfans said …
博主您好，我装好livereload之后，运行出现这个错误，不知道怎么回事：
Version: 1.4 (compatible with browser extension versions 1.4.x)
Port: 35729
Watching: /Users/scriptfans/untrip html
- extensions: .html .css .js .png .gif .jpg .php .php5 .py .rb .erb
- excluding changes in: */.git/* */.svn/* */.hg/*
- with a grace period of 0.05 sec after each change
LiveReload is waiting for browser to connect.
/opt/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require’: no such file to load — rubycocoa (LoadError)
尝试gem install rubycocoa，但是这个gem不存在诶，真郁闷，请问您有遇到这个问题吗？