Sublime Text3 無法使用LiveReload外掛的解決方法
原部落格時間: 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
https://github.com/Grafikart/ST3-LiveReload
可以從上面地址下載到可用的livereload,直接下載到本地或clone均可
你會得到一個外掛包,將該資料夾重新命名為
LiveReload
,然後將其手工放入 sublime text3的Packages目錄中,此資料夾是隱藏資料夾,預設地址為
C:\Users\your_user_name\AppData\Roaming\Sublime Text 3\Packages
博主是用的Everything查詢的,直接輸入sublime package 關鍵字即可查詢到。
順道在此打個廣告,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連線成功的提示
最後,開始享受敲程式碼的愉悅感吧!