Sublime Text 3 配置LiveReload实时刷新网页

LiveReload是一款非常棒的插件，可以在浏览器中实时刷新页面，这样就可以做到保存就能立马看到效果。想想用着两块屏幕开发时的场景，可以做到实时刷新，再也不用F5。

准备工作

---

开始之前我们需要准备下面这两个插件

1、下载Sublime Text 3这款编辑器，然后在Sublime安装LiveReload插件。

2、在Chrome浏览器安装LiveReload插件。

安装插件

---

在Sublime安装LiveReload插件时需要注意下，通过Package Control: Install Package安装的发现后来不能用。所以通过Github下载LiveReload

LiveReload

然后在Sublime工具栏Preferences > Browser Packages...打开Packages目录，解压下载的插件到Packages目录并重命名为LiveReload。

接着安装Chrome上的LiveReload，安装好以后可以在地址栏旁边看到如下按钮。

未开启监听

接着右键单击选择管理扩展程序，把允许访问网址文件这一选项勾选上。

勾选允许访问网址文件

在Sublime中配置LiveReload

---

方法1：过用户自定义配置来开启。

Preferences > Package Settings > LiveReload > Settings User

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

方法2：通过控制台命令来开启。

1. Ctrl+Shift+P

2. LiveReload: Enable/disableplugins

3. Enable - Simple Reload

完成配置后打开一个静态HTML文件，并点击浏览器地址栏旁边的LiveReload按钮，这时看到按钮变成实心的了。

已经开始监听

接着修改一下HTML内容就能实时看到效果了。