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中看到相应变化。