Sublime Text 3 LiveReload

Sublime Text 3 LiveReload

Sublime Text 3 LiveReload

 

之前有介紹過 Windows LiveReload 開發環境

當時是使用 Sublime Text 2 建置環境,但是還是有很多錯誤

最近因為在嘗試把 Theme 加上 RWD 功能,所以需要存檔馬上更新頁面的功能

先前都是用 Sublime Text 3 加 SFTP 存檔上傳的方法做…

但是存檔完之後還是要手動更新頁面,無法做到即時性的更新

所以最近開始萌生念頭,也找了許多資料…最後測試成功了 !!

所需軟體如下:
1.Sublime Text 3 (軟體名稱)
2.Sublime Text 3 – LiveReload (軟體外掛)
3.AMPPS (伺服器環境架設)
4.Chrome – LiveReload (瀏覽器附加元件)

準備好以上就可以開始實作了!!

1. AMPPS 啟動,保持 Start 狀態 !! 也要確定 php 可以運行

Sublime Text 3 LiveReload

2.Chrome 安裝 LiveReload 附加元件

Sublime Text 3 LiveReload

3.Sublime Text 3 安裝 LiveReload 外掛

Sublime Text 3 LiveReload

4.在 Sublime Text 3 –> Preferences –> Package Settings –> LiveReload –> Settings – Default

輸入以下字串

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

Sublime Text 3 LiveReload

當今天打開 Chrome 時如下圖所示

圖左空心表示關閉狀態,存檔不會自動更新。

圖右實心表示啟用狀態,存檔時會自動更新。

Sublime Text 3 LiveReloadSublime Text 3 LiveReload

 

實作畫面

Sublime Text 3 LiveReload