修改文件后浏览器自动刷新解决方案
为何要找这样的一个方法？
工做场景中发现的需求，都要找办法去解决。
咱们在双屏开发的时候，常常是在Mac屏幕上写代码，而后在扩展屏幕上放着浏览器。
通常写几行代码，就会去刷新一下浏览器，看看代码运行是否正常。但是把鼠标从两个屏幕滑来滑去，很麻烦，特别是在写CSS的时候，若是能跨屏刷新就很棒了。javascript
现有编程工具的自动刷新解决方案
其实有不少工具能够作到文件一改变，浏览器自动刷新，其实这样体验也是最好的，但是因为一些缘由，这些工具并不能解决全部工做场景的需求。css
因为这不是本文的主要内容，只列出一些能够实现自动刷新的工具，没有进行详细展开，你们能够自行去研究下。前端
- 在
Sublime下有一个插件叫作LiveStyle能够实现修改CSS后自动刷新，可是每个CSS文件都要手动配置，不够智能。须要安装Chrome插件：Emmet LiveStyle。 -
JetBrains公司的IDEA、WebStorm、PhpStorm产品有LiveEdit这个功能，它也能够实现修改文件后实时刷新，可是须要使用工具内建的服务器，若是是本身前端须要在本身的服务环境下写就不行啦。
在介绍LiveEdit以前，我还去看了一个这个曾经用过的功能，说一下LiveEdit使用须要注意的地方：WebStorm自带，IDEA要在插件中去下载。须要在Preferences->Build,Execution,Deployment->Debugger->Live Edit中的Update选择Auto in(ms)，默认是300毫秒自动更新一次，不用改也能够用，这样才能够自动更新。因为网上关于LiveEdit使用的文章大都是很久以前写的，和如今的版本不同了，网上说是在View下勾选Live Edit，但是这个勾选在个人电脑上没有，原来是将LiveEdit变成了JavaScript debug session的一部分，也就是在调试模式的时候自动打开了，这些网上都没有资料说，我也是看了官方文档才知道的，在插件中点击连接就可以进入官方文档查看细节。
一样也须要Chrome插件的支持：JetBrains IDE Support。java
-
Brackets是Adobe支持的一个开源产品，实现修改文件自动刷新的方法比较容易，直接点击右上方的一个小闪电就行了，它和LiveEdit同样自建了服务器，若是本身的项目须要启动本身的服务，就不能用啦。
不过它不用安装Chrome插件，很方便。
以前双屏开发的时候用过一段时间，和Emmet配合写CSS真的是神速。node
现有工具的缺点
由于它们的原理大多数都是在内部实现了一个服务器，你的文件必须在它的服务端口下才能实现动态刷新，可是咱们开发的项目都有本身的服务器和端口，因此这种方式只适合写不与启用服务相关的Web前端程序，也就是本身写写demo小例子的时候能够用，真正的项目中用不到了。web
有没有知足全部工做场景需求的方法？
我在想，真正的工做场景都比较复杂，并且每一个人用的编程工具都不同，有没有一个比较通用的解决方案呢？若是有，这个解决方案会是怎么样？挖掘一下，发现其实真正的用户需求就是不让鼠标移动到拓展屏幕上，Chrome也可以刷新。并非非得须要一个修改文件后实时刷新的插件。若是可以按一个组合键就让拓展屏幕的Chrome刷新一下就行了，虽然没有自动刷新方便，可是能够支持全部编辑器，同时每刷新一次网页的成本也很低，毕竟不用再移动鼠标了。chrome
有一天在网上逛的时候，看到了有人用AppleScript实现了跨屏刷新浏览器，本身按照他的方法试了一下，果真能够。可是以前看WWDC的时候知道JavaScript能够实现和AppleScript同样的功能了，因而研究了一下。
打开Automator->选择服务->搜索JavaScript->输入以下代码编程
var chrome = Application('Google Chrome');
var activeTab = chrome.windows[0].activeTab;
activeTab.reload();
你可能问我这个具体怎么作的，我是去查看脚本编辑器中Google Chrome的字典，而后去苹果开发者中心查看了JavaScript的文档，若是具体展开说就太长了，这里不作展开。windows
在上面的"服务"收到选择没有输入，再改个名字，就能保存了。
而后去设置->键盘->快捷键->服务->找到刚才保存的服务名字，设置一个快捷键就行了。
我设置的是Command + 3，由于这样设置和Command + R很像，虽然偶尔有快捷键冲突，不过大多数时候还好。浏览器
有没有更好的方法？
上面的方法虽然可以实现跨屏刷新，不用鼠标滑到另外一个屏幕，不过仍是须要本身点一下刷新，继续寻找合适的解决方案。
页面引入js库文件
live.js和cssrefresh.js。这两个JavaScript库能够实现本地文件修改后浏览器自动刷新，并且CSS更改不用刷新，样式直接改变。
我颇有兴趣这是怎么作到的，看了一下它们的原理，是一直不停的请求页面中引入的文件，若是发生了改变，就从新渲染，这么作总以为怪怪的。
无需支持的Chrome插件
SmartF5，地址：
https://chrome.google.com/webstore/detail/smartf5/pgglpnfdiigfapjinhfgnbckibpdbbeo
腾讯AlloyTeam出品的Live Reload，地址：
https://chrome.google.com/webstore/detail/pccddenngcbofbojodpghgpbheckgddn
这两个插件是在Chrome商店搜索不到的，不知道为何，因此放出了连接。另外还有Css Auto Reload等插件能够实现，你们能够具体找找。
注意：
- 直接搜索
Live Reload会出现另一个插件，下面我会说。 - 这一类插件貌似有冲突，最好只安装一个。
用了插件后发现本身的项目修改CSS后好几秒后才刷新，我去看了一下这些插件的源代码，原来也是轮询查找是否存在改变的文件。但是公司的项目有几十个文件，因此刷新就不是很及时了。
Chrome插件LiveReload
这个插件不是上面的地址那个，是能够直接在Chrome商店搜索出来的。
它须要相似Grunt这种自动化构建工具支持，看了一下原理，是在LiveReload和构建工具之间创建了一个WebSocket链接，构建工具监听本地文件变化，若是有变化就通知LiveReloa从新渲染页面或者刷新页面。
它不会去轮询每个文件的变化，而是文件了主动去通知，因此在项目中引入了几十个文件的状况下也不会有过多的延迟。
可是它还要去弄构建工具，使用成本比较高，算是一个缺点，具体怎么使用你们能够自行搜索，网上有教程。
BrowserSync
感谢Leo同窗的提供。
这是一个基于node的工具，具体怎么使用官网说的很清楚，这里说一个它的优势和原理。
首先，它不用安装Chrome插件，由于你填写须要调试的地址后，会生成另外一个代理地址，经过代理地址访问，就能够自动刷新，那看起来好像也不科学。
实际上代理地址自动向页面中插入一段JavaScript脚本，这段代码和代理服务器保持了一个WebSocket链接，若是文件有更新，就会通知那段JavaScript脚本去从新渲染或者刷新页面。
同时，它还集成了weiner，一个移动端调试工具，之后有机会再介绍，这篇博客主要是罗列下自动刷新的解决方案。
固然，BrowserSync也有Grunt的插件，同时它的功能不只限于自动刷新页面，还有更多好用的功能能够去发现。
结论
同时最好也要看看各个解决方案的原理，这样若是遇到了问题才不会不知所措，好比若是不知道大多数的方案是经过轮询每个文件是否更改实现的，那么当项目大了后发现好几秒后才会刷新，也就本身忍着了。
上面说了好多能够实现修改文件后自动刷新的办法，该说一下结论了。
若是你只是想临时用一下这个功能，用腾讯AlloyTeam出品的Live Reload已经能够了，它有一些配置项能够配置，可是它不支持本地file协议的文件。若是须要访问本地文件，SmartF5能够实现。
要是在一个比较大的项目中使用，最好用BrowserSync，由于在大一点的项目中都会去配置自动化构建工具，使用成本高这个问题就很好解决了。
对于高效工具的需求，也要像解决程序问题的思路同样去寻找。
欢迎关注【本期节目】，微信公众号ID：benqijiemu。
这里有：互联网思考、软件&工具推荐、前端技术等。
能够在公众号回复我，但愿和你们一块儿交流全部与互联网相关的事情~