修改文件后浏览器自动刷新解决方案

Posted 2020-07-29 axl234

现有编程工具的自动刷新解决方案

其实有很多工具可以做到文件一改变，浏览器自动刷新，其实这样体验也是最好的，可是由于一些原因，这些工具并不能解决所有工作场景的需求。

由于这不是本文的主要内容，只列出一些可以实现自动刷新的工具，没有进行详细展开，大家可以自行去研究下。

• 在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。

• Brackets是Adobe支持的一个开源产品，实现修改文件自动刷新的方法比较容易，直接点击右上方的一个小闪电就好了，它和LiveEdit一样自建了服务器，如果自己的项目需要启动自己的服务，就不能用啦。
  不过它不用安装Chrome插件，很方便。
  之前双屏开发的时候用过一段时间，和Emmet配合写CSS真的是神速。

现有工具的缺点

因为它们的原理大多数都是在内部实现了一个服务器，你的文件必须在它的服务端口下才能实现动态刷新，但是我们开发的项目都有自己的服务器和端口，所以这种方式只适合写不与启用服务相关的Web前端程序，也就是自己写写demo小例子的时候可以用，真正的项目中用不到了。

有没有满足所有工作场景需求的方法？

我在想，真正的工作场景都比较复杂，而且每个人用的编程工具都不一样，有没有一个比较通用的解决方案呢？如果有，这个解决方案会是怎么样？

挖掘一下，发现其实真正的用户需求就是不让鼠标移动到拓展屏幕上，Chrome也能够刷新。并不是非得需要一个修改文件后实时刷新的插件。如果能够按一个组合键就让拓展屏幕的Chrome刷新一下就好了，虽然没有自动刷新方便，但是可以支持所有编辑器，同时每刷新一次网页的成本也很低，毕竟不用再移动鼠标了。

有一天在网上逛的时候，看到了有人用AppleScript实现了跨屏刷新浏览器，自己按照他的方法试了一下，果然可以。但是之前看WWDC的时候知道JavaScript可以实现和AppleScript一样的功能了，于是研究了一下。
打开Automator->选择服务->搜索JavaScript->输入如下代码

var chrome = Application(‘Google Chrome‘);
var activeTab = chrome.windows[0].activeTab;
activeTab.reload();

你可能问我这个具体怎么做的，我是去查看脚本编辑器中Google Chrome的字典，然后去苹果开发者中心查看了JavaScript的文档，如果具体展开说就太长了，这里不做展开。

在上面的"服务"收到选择没有输入，再改个名字，就能保存了。
然后去设置->键盘->快捷键->服务->找到刚才保存的服务名字，设置一个快捷键就好了。
我设置的是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等插件可以实现，大家可以具体找找。

注意：

1. 直接搜索Live Reload会出现另外一个插件，下面我会说。

2. 这一类插件貌似有冲突，最好只安装一个。

用了插件后发现自己的项目修改CSS后好几秒后才刷新，我去看了一下这些插件的源代码，原来也是轮询查找是否存在改变的文件。可是公司的项目有几十个文件，所以刷新就不是很及时了。

Chrome插件LiveReload

这个插件不是上面的地址那个，是可以直接在Chrome商店搜索出来的。
它需要类似Grunt这种自动化构建工具支持，看了一下原理，是在LiveReload和构建工具之间建立了一个WebSocket连接，构建工具监听本地文件变化，如果有变化就通知LiveReloa重新渲染页面或者刷新页面。

它不会去轮询每一个文件的变化，而是文件了主动去通知，所以在项目中引入了几十个文件的情况下也不会有过多的延迟。

但是它还要去弄构建工具，使用成本比较高，算是一个缺点，具体怎么使用大家可以自行搜索，网上有教程。

BrowserSync

感谢Leo同学的提供。
这是一个基于node的工具，具体怎么使用官网说的很清楚，这里说一个它的优点和原理。
首先，它不用安装Chrome插件，因为你填写需要调试的地址后，会生成另一个代理地址，通过代理地址访问，就可以自动刷新，那看起来好像也不科学。
实际上代理地址自动向页面中插入一段JavaScript脚本，这段代码和代理服务器保持了一个WebSocket连接，如果文件有更新，就会通知那段JavaScript脚本去重新渲染或者刷新页面。

同时，它还集成了weiner，一个移动端调试工具，以后有机会再介绍，这篇博客主要是罗列下自动刷新的解决方案。

当然，BrowserSync也有Grunt的插件，同时它的功能不仅限于自动刷新页面，还有更多好用的功能可以去发现。

结论

同时最好也要看看各个解决方案的原理，这样如果遇到了问题才不会不知所措，比如如果不知道大多数的方案是通过轮询每一个文件是否更改实现的，那么当项目大了后发现好几秒后才会刷新，也就自己忍着了。

上面说了好多可以实现修改文件后自动刷新的办法，该说一下结论了。

如果你只是想临时用一下这个功能，用腾讯AlloyTeam出品的Live Reload已经可以了，它有一些配置项可以配置，但是它不支持本地file协议的文件。如果需要访问本地文件，SmartF5可以实现。

要是在一个比较大的项目中使用，最好用BrowserSync，因为在大一点的项目中都会去配置自动化构建工具，使用成本高这个问题就很好解决了。