[開發筆記] 幫你的 Sublime Text 2安裝 LiveReload Plug-in

有鑑於，網頁設計師最常按的鍵就是 F5 (mac是 Command + R) 重新整理了，如果你和筆者一樣，開發的時候使用雙螢幕，每次存檔完後，要重新整理都要切換畫面，有點麻煩。

Livereload plug-in 就是讓你可以在在存檔之後，頁面自動更新，用起來真的相當的暢快！而且安裝的方法相當簡單。

首先，你要安裝 Sublime Package Control，安裝辦法請參考
http://wbond.net/sublime_packages/package_control

安裝 livereload plug-in

點選 Sublime Text 2 > Preferences > Package Control

會出現以下的畫面：

選擇 Install Package

接著就會出現很多的plug-in讓你選，這時候輸入 LiveReload，並選擇

結束後出現以下畫面即是安裝完成

下一步：安裝Chrome extension

Chrome的安裝網址為：https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

如果你習慣用Firefox，網址是：
https://addons.mozilla.org/en-US/firefox/addon/livereload/

在你的Chrome的右上角出現此按鈕就是安裝完成囉！

趕快來試試

用Sublime 開啟你編輯的程式，並用第二個螢幕打開Chrome瀏覽該檔案，並按下 extension的按鈕，在你的Sublime 的右下角會出現這個訊息：

就是完成囉！如此一來，只要檔案一存檔，browser就會自動存檔了。效率提升、爽度激升！

reference：

http://shoogledesigns.com/blog/blog/2012/07/23/sublime-text-2-package-control-and-livereload/

更新 (For Sublime crash)

有一些人安裝後，會在存檔幾次後出現crash的狀況，筆者的Mac 10.8就會。以下是解法

https://github.com/dz0ny/LiveReload-sublimetext2/issues/15

簡單說，就是下載DevZipPackage

關閉Sublime，然後把你 package裡 LiveReload的檔案全清空，換成上面的連結裡的。

Windows：
%userprofile%\AppData\Roaming\Sublime Text 2\Packages\
Mac
%userprofile%\AppData\Roaming\Sublime Text 2\Packages\ 

接著打開Sublime Text 2，在裡面執行以下指令
Windows: Ctrl + ⇧ + P
Mac: ⌘ + ⇧ + P
輸入：LiveReload: En
選擇 "Enable - Simple Reload with delay(400ms)" 就行了