前端开发：实时刷新（及时预览）工具小汇总，兼有gulp+browser-sync设置方法

自己写标签： 实时刷新、 免F5、 gulp + browser-sync

开门见山，首先讲明一下本文的定位吧：
写这篇文章是因为自己在平时的学习中，一次次试验了很多的前端实时刷新工具，有顺手的，有蹩脚的，有简单的，有麻烦的，安装完又折腾，折腾完又卸载，体验完这些也着实花费了不少时间，就在昨天又刚刚折腾完gulp+browser-sync的方法，估计可以让我消停一阵子了。这篇文章主要介绍和汇总一下我用过和见过的前端页面实时刷新工具（就是ctrl+s之后实现页面刷新的意思，觉得F5刷新也不麻烦的朋友们就可以不必往下读了哈），希望能为你挑选自己喜欢的工具节省些时间，也少些纠结，闲言少叙，下面开始

工具列表（顺序：从安装方便到功能强大）

1.自带及时预览功能的编辑器：

Atom brackets webstorm
上述三者都是大名鼎鼎的编辑器，插件众多，功能强大，为前端开发人员们在工作中立下汗马功劳，也深受开发人员们的喜爱，因此也是教程众多，我就不再多说了。google一下，你就知道如何使用它们的及时预览功能了。但是这些工具的及时预览有一点不爽：预览界面内嵌在编辑器界面内，减小了对整张网页的视觉效果，Atom和Brackets都存在这样的问题（当然这也不算是问题了，全看个人喜好）。如Atom编辑器使用atom-preview-html实现的效果：
而webstorm实现预览的效果是很赞的，右上角会有多个浏览器的logo图标，想在哪个浏览器打开就点击哪个就好了，挺方便。webstorm本身也是算是前端人员熟知的编辑器中体量和功能相当强大的了，除了打开速度有点慢之外，没啥说的。

2.sublime text3

• 把sublime text3单独拿出来说是有原因的，首先它是我长期使用的第一款编辑器，有个人情愫在其中难免没有偏爱之心。最喜欢的就是它超快的打开响应速度，有种说干就干的爽快劲儿，即便安装了一大堆的插件儿也丝毫没有觉得变缓慢，点个赞。
  说到插件就不得不说sublime编辑器是没有自带及时预览功能的，但是可以通过插件来实现：比如sidebarEnhancement，在html文件名上右键打开open in Browser就可以查看效果了，这其实就是最传统的 ctrl+s+F5刷新预览大法，只不过直接在编辑器上打开浏览器了而已。

• 还可以使用livereload方法，但是比较古老了，感兴趣的话可以google一下（如果你可以忍受各种各样的V1推广，V2推广等不相关内容强占你的页面，当然也可以用百度啦）

• 以前作为新手，对于命令行操作的工具有畏惧感，所以接触到“F5免刷新工具的时候”(点击进入它的官网可下载)一下子被其可视化的界面操作吸引了，用它在浏览器中打开文件之后，在编辑器中编辑完代码，ctrl+s即可实现自动刷新，很方便，用了很长一段时间都觉得十分方便，但是最近发现它总是在没有进行任何操作的时候自动刷新一遍，在浏览器中找好的节点位置一下子又不见了，搞得正在盯着屏幕看代码的我很诧异，有种正津津有味看着大片儿一下