Sublime Text如何利用LiveReload自动刷新页面及双屏开发

关于Sublime Text这个编辑器，相信大家或多或少都会有点了解，它轻巧而且插件功能丰富，在使用Sublime Text之前，我用过二款编辑器，一个是Dreamweaver,入门使用的编辑器，可视化而且方便。另外一个就是WebStorm ，这款编辑器太过庞大，很占内存，对于电脑配置不高的开发人员来说，不推荐这款，因为它会卡的你不要不要的。

在我们web开发过程中，大部分的重复动作都是在修改文件、刷新浏览器中不断切换，其开发效率也会大打折扣，为了在我们开发过程中，我们只需要专心修改代码，剩下的交给浏览器自动完成刷新的任务，我们找到了LiveReload这个偷懒的神器，它可以在你修改了代码后实时进行页面刷新。

具体怎么用呢？查看网上教程一堆，却很难找到有用且方便傻瓜式的操作方法，需要配置一大堆的东西，显然不适合大家急切使用这个NB的功能心情，经过本人一路摸索后，只需四步即可配置成功，所需工具：

Chrome、Firerox

LiveReload(ST和浏览器中都必须安装这款插件)

下面就让我们一步步的去探索吧~

一：在Sublime Text，安装插件LiveReload

打开你的Sublime Text，安装插件LiveReload。如何安装插件包：按住Ctrl+Shift+p调出命令面板，输入install package，Ender输入你需要的插件直接点安装即可。看到网上许多人说在Sublime Text中下载安装的Livereload有问题，不能用，但是我这边是正常可用的，如果碰到问题大家可以在下面留言。

ok，在编辑器中的安装已经完成，接下来我们还需要在浏览器中安装同名的插件。在这里我只介绍Chrome和Firefox浏览器中的使用，Safari不支持file：//类型的文件刷新。

二：在浏览器中安装LiveReload

在Chrome的应用商店中(如果连接不上，可以安装“谷歌访问助手”)，搜索LiveReload，安装并“允许访问文件网址”，Firefox中直接搜索安装即可。

三:让插件连接并启动，开始工作

安装完成以后我们可以在浏览器的右上角看到这样一个按钮

点击一下

当这个按钮显示为黑色实心

Firefox为红心指南针

表现已经连接上并正常工作了。

四：Sublime Text连接插件

每打开一次Sublime Text，我们都必须调用一次命令来开启浏览器自动刷新的功能（切记），还是按住Ctrl+Shift+p，输入LiveReload:Enable/disable plug-ins,Ender后选择Enable-Simple Reload。这样我们整个配置就结束了。

结束语：虽然只是这简单的四步，但是其中的坑是谁踩到谁知道，现在给大家列出其中几个需要重点注意的地方，望大家在安装过程中注意：

1：在你的Sublime Text版本中，用ctrl+shift+p安装LiveReload不管用的情况下，可手动安装并启用。

2：在浏览器安装LiveReload插件完成的时候，一定要将此插件的图标拖放到你方便查看的地方，有时并不是我们安装有问题，只是该插件没有启用而已。（好吧，这是粗心的坑）

3：每打开一次ST，都必须输入上面那个命令才能有效。

上面讲完利用LiveReload自动刷新页面后还有一个我们经常听到的词：双屏互动。顾名思义，就是我们在一台显示屏上面进行开发，另外一台显示屏就是我们的浏览器自动刷新查看的效果。

想想是不是觉得很激动呢？高端大气的气息扑面而来有木有，但是实际情况是我们并没有那么高端的设备和硬件支持。当然，大气有大气的玩法，咱们就玩点接地气的也是可以满足要求的，所需装备：

一台笔记本，一台显示器（可以是台式多余的显示器，也可以是你家的电视机等等）

一根VGA视频线，就是你的显示屏连接主机的那根线

将你的辅助显示器连接到笔记本后，只需要在你的笔记本上面设置一下就可以了，鼠标右键如下图：

设置完成后，接下来就是见证效果的时候了。我们把需要展示在辅屏的页面拖到显示屏的右边，就可以看到该页面跑到辅屏里面去了。那么后面就是做我们该做的事情了：编程。

ok，就介绍到这里了，如有疑问，欢迎大家在下面留言，good luck~。

 

 

原文链接：http://whdhy.cn/?p=52