×

Sublime Text 3 配置Live​Reload实时刷新网页

96
Koala_0
2016.04.08 11:51* 字数 394

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内容就能实时看到效果了。

随笔
Web note ad 1