做前端的同学，或者说做页面的同学，键盘上最容易坏掉的可能就是F5，因为每一次的修改文件几乎都要F5一次看看效果是不是预期那样的。在使用liveReload之前的场景应该是这样的：在编辑器里面修改完某一个文件的某一部分了，然后按住ctrl+s,保存一下，然后鼠标移到浏览器那里并且点击一下，确保当前使用浏览器，然后再按键盘F5或者鼠标右键刷新。梳理一下流程就是：

1. 编辑修改文件

2. 保存文件(Ctrl+S)

3. 鼠标移到浏览器

4. 鼠标点击浏览器

5. F5或者右键刷新

实际情况其实浪费时间更多：

1. 编辑修改文件

2. 保存文件（Ctrl+S）

3. 鼠标移到浏览器

4. 鼠标点击浏览器

5. F5或者右键刷新

6. 鼠标移到编辑器

7. 鼠标点击浏览器

是的，实际情况是1至7步骤的周而复始的循环，直到文件修改满意。liveReload的出现至少解决了其中的鼠标移到和鼠标点击环节这些不属于编辑文件但是发生频率较高的多余动作。只需要关注当前编辑的文件即可：

1. 编辑文件

2. 保存文件，并查看变化，如果不满意返回1，如果满意至此结束。

提示：liveReload是一套工具，连接编辑器与浏览器。所以涉及的安装有chrome和sublimetext3

安装步骤:

1. 在chrome商店搜索"liveReload"并安装

2. 第二步就是编辑器sublimetext3的插件livereload安装了:

这里要提一下的就是liveReload官方github提供的git似乎有点问题，需要从另外一个git地址下载：

https://github.com/Grafikart/ST3-LiveReload.git

具体执行以下：

Ctrl+Shift+P
Add Repository

然后将上面的git地址贴到sublimetext3，并且回车确认

接着

Ctrl+Shift+P
IP
LiveReload   ###官方版
Ctrl+Shift+P
IP
ST3-LiveReload   ###st3修复版

这里会遇到点小问题liveReload是官方的插件，但是貌似对ST3支持不好，所以后面再又安装了ST3修复版。

接着是配置插件：

Preference>Package Settings>LiveReload>Settings User

贴进去：

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

或者还有就是

Preference>Package Settings>LiveReload>Plugins>Enables/disable plugins

或者

ctrl+shift+p 
LiveReload: Enable/disable plugins 
Enable - SimpleReload

最后全部完成。在ST3里面测试一下是否是当前编辑的文档只要一修改，浏览器显示就会对应的变化。最后再提示一下，如果是在本地编辑文件，请进入chrome的插件配置把“允许访问文件网址”勾选上，这样就支持了通过 file:// 打开的页面