Sublime Text3搭配LiveReload實現實時重新整理
前言:
LiveReload是一款連線編輯器與瀏覽器解放F5的開發工具。LiveReload會監視檔案系統的變化,一旦你儲存檔案,它就將瀏覽器重新整理。所以當你改變儲存一個CSS檔案或影象,瀏覽器是即時重新整理頁面,無需你手動點選F5重新整理。
一、下載安裝外掛LiveReload
在Chrome應用商店下載外掛LiveReload,點選新增到Chrome後在選單欄中顯示一個有著空心圓的圖示。
二、新增完後在擴充套件程式頁面,將LiveReload設定為【允許訪問檔案網址】
三、Sublime Text3下載LiveReload
方法一:通過在Sublime Text3中:Ctrl+Shift+P→ install
方法二:下載github的包解壓後放到Sublime Text的Packages下,將資料夾命名為LiveReload;下載地址:https://github.com/Grafikart/ST3-LiveReload
Packages的檔案位置可以點選Preference→Browse Packages…
四、配置並啟用LiveReload
①配置LiveReload
Preference>Package Settings>LiveReload>Settings User,複製下面的程式碼貼上儲存
{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
]
}
②在Sublime中啟用LiveReload
Ctrl+Shift+P →LiveReload: Enable/disable plugins, 按 Enter→在下拉列表找到 “Enable - Simple Reload” , 按 Enter
五、使用
點選 Chrome選單欄中LiveReload 圖示,中心的空心小圓圈會變成實心,表示已經啟用LiveReload並連線成功。Sublime text3中的任何變化,Ctrl+S後,立即在Chrome中看到相應變化。