1. 程式人生 > >Sublime Text3搭配LiveReload實現實時重新整理

Sublime Text3搭配LiveReload實現實時重新整理

前言:

LiveReload是一款連線編輯器與瀏覽器解放F5的開發工具。LiveReload會監視檔案系統的變化,一旦你儲存檔案,它就將瀏覽器重新整理。所以當你改變儲存一個CSS檔案或影象,瀏覽器是即時重新整理頁面,無需你手動點選F5重新整理。

一、下載安裝外掛LiveReload

在Chrome應用商店下載外掛LiveReload,點選新增到Chrome後在選單欄中顯示一個有著空心圓的圖示。


二、新增完後在擴充套件程式頁面,將LiveReload設定為【允許訪問檔案網址


三、Sublime Text3下載LiveReload
方法一:通過在Sublime Text3中
Ctrl+Shift+P→ install

livereload

方法二:下載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中看到相應變化。