[開發筆記] 幫你的 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:

更新 (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)" 就行了 

留言

  1. 最近在學Sublime Text剛好看到這個liveReload試著弄看看
    結果發現沒作用,後來再查才知道要在Chrome擴充功能管理裡面
    LiveReload的允許存取檔案網址要打勾才可以有作用

    回覆刪除

張貼留言