原部落格時間: 2015-08-16 16:10:40

問題更新

最近電腦系統換為ubuntu後，發現原來這個問題的解決辦法和windows中略有不同，及時記錄下來

前言

以前一直在用sublime text2, 有一款外掛感覺非常好用，就是LiveReload，
在sublime中寫完程式碼，按下ctrl+s儲存後，瀏覽器自動重新整理頁面，可直接檢視效果，
而不用切換到瀏覽器中再按F5重新整理。這對於做web開發的真心方便，最爽的莫過於雙屏開發，這邊寫完程式碼，儲存，那邊直接檢視效果。
然而，前段時間開始嘗試sublime text 3, 沒想到通過package control安裝的livereload

安裝LiveReload

chrome

1.在chrome瀏覽器中安裝擴充套件外掛LiveReload，安裝完成後，可看到右上角出現livereload圖示，
如下圖所示，此時中心的圓點是空心的，代表還未開啟

2.進入chrome擴充套件程式頁面，將livereload中的允許訪問檔案網址打上勾

sublime安裝LiveReload

sublime text3的package control中的livereload外掛存在bug, 不知道什麼時候能夠修復

windows

順道在此打個廣告，Everything是一款特別好用的windows平臺下的搜尋工具，比windows自帶的搜尋功能好用上千倍，附上下載地址，有需自取

http://www.voidtools.com/downloads/

Linux

cd ~/.config/sublime-text-3/Packages  
rm -rf LiveReload  
git clone https://github.com/Grafikart/ST3-LiveReload.git LiveReload  

接下來，開啟sublime text 3

windows
preferences -> Packge Settings -> LiveReload -> Settings - User

Linux
preferences -> Packge Settings -> LiveReload -> Settings - Default
輸入以下內容儲存即可

{
    "enabled_plugins": [
        "SimpleReloadPlugin",
        "SimpleRefresh"
    ]
}

有很多教程是要每次開啟sublime後，通過package control手動啟用上述元件，這樣也是可以的，但總歸麻煩了一些，可以直接新增上述程式碼，使之預設載入。

最後

例如，開啟某個html檔案，在chrome中開啟，點選LiveReload圖示，可以看到中心由空心圓點變為實心圓點，代表啟動成功，這時返回sublime中，可以看到左下角出現LiveReload連線成功的提示

最後，開始享受敲程式碼的愉悅感吧！