Saber 酱的抱枕

前端在编辑页面时经常需要切换到浏览器里刷新页面来查看显示效果，不断地这个重复过程是非常坑爹的。sublime text3可以使用LiveReload插件来热更新页面，不过配置步骤就有点坑爹了，找了好几个教程才找到一个正确的的。

LiveReload插件是分两个部分的，需要在编辑器上和浏览器上分别安装（本文只讨论chrome浏览器）。只要能在浏览器里显示并且能用sublime text3编辑的本机文件都可以使用LiveReload插件来实现热更新。

LiveReload插件还有一个地方很强大，例如html里引用了外部的css、js文件，那么当你修改了这些外部文件后，浏览器里的这个html页面也会自动更新。这对于调整样式、调试js代码也是很方便的。

不过LiveReload插件似乎只能更新本机文件和本机url的文件，如果编辑一个www域名里的文件，并在浏览器里的该页面上启用热更新，能否生效呢（试了下不行。chrome上LiveReload的global.js里设置了ip为127.0.0.1，没法改。不过就算能改，也很可能遇到其他问题）。

---

配置步骤如下：

1.在chrome浏览器中安装LiveReload插件。（如果打不开chrome网上商店的话得翻墙）

安装后可以看下浏览器右上角的LiveReload插件的图标，它中间的小方块是空心的，表示未在这个页面上启用热更新。

点击图标之后会变成实心的，表示已经在这个页面上启用了热更新。

2.到扩展管理器中，对LiveReload勾选“允许访问文件网址”：

3.在sublime text3中，按ctrl+shift+p打开命令面板，并选择“Add Repository”，之后底部会出现一个输入框：

输入下面的字符并回车。

https://github.com/NickWoodhams/LiveReload.Git

这个是因为在sublime text3的插件库直接安装的LiveReload插件不能用，所以我们需要添加能用的LiveReload插件的安装信息（大致意思）。

4.再次按ctrl+shift+p打开命令面板，选择Install Package，等到出现插件列表时，再输入“LiveReload”，找到LiveReload插件并安装。

5.如果出现了LiveReload的readme文字，说明LiveReload插件安装成功了。之后在sublime text3的菜单栏选择：

preferences->packge settings ->livereload->settings-default

（最后一项选择settings-user也可以），之后会打开一个配置文档，将其内容修改为：

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

之后保存。

6.重新启动sublime text3。至此配置已经完成。

接下来如何使用呢？

1.先在sublime text3里打开要热更新的文件（html、js、php、txt等可以在浏览器中显示的都行）。

2.在chrome里打开这个文件。文件路径使用本地路径或http路径都可以，例如：

http://127.0.0.1/t.html
http://localhost/t.html
file:///D:/wamp/www/t.html

3.点击LiveReload插件的图标，使这个页面上的文档启用热更新。

4.在sublime text3里编辑这个文件，当你每次保存之后，chrome里的这个页面都会自动刷新，达到热更新的效果。

———————————————教程完毕———————————————

ps：原始的情况下，我们编辑和查看页面需要做的是三个步骤：

保存→切换到浏览器→刷新

LiveReload插件已经免去了刷新步骤。如果编辑器和浏览器同时显示（如双显示器），那么切换步骤也免了，只需要保存这一个步骤。

不过在编辑器和浏览器不能同时显示的情况下，仍然需要保存→切换两个步骤。那能否再简化呢？答案是可以的。在sublime text3的用户配置文件中添加下面这条配置（用户配置文件可以通过“preferences->设置-用户”来打开。）：

"save_on_focus_lost": true,

保存配置之后，当sublime text3失去焦点时，它会自动存储文件。这样我们就不需要手动保存了，只剩下切换到浏览器这一个步骤。也是相当的方便了。

sublime text3使用LiveReload插件热更新页面