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

为什么要找这样的一个方法?

工作场景中发现的需求,都要找办法去解决。

我们在双屏开发的时候,经常是在Mac屏幕上写代码,然后在扩展屏幕上放着浏览器。一般写几行代码,就会去刷新一下浏览器,看看代码运行是否正常。可是把鼠标从两个屏幕滑来滑去,很麻烦,特别是在写CSS的时候,如果能跨屏刷新就很棒了。

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

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

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

在Sublime下有一个插件叫做LiveStyle可以实现修改CSS后自动刷新,但是每一个CSS文件都要手动配置,不够智能。需要安装Chrome插件:EmmetLiveStyle。

JetBrains公司的IDEA、WebStorm、PHPStorm产品有LiveEdit这个功能,它也可以实现修改文件后实时刷新,但是需要使用工具内建的服务器,如果是自己前端需要在自己的服务环境下写就不行啦。在介绍LiveEdit之前,我还去看了一个这个曾经用过的功能,说一下LiveEdit使用需要注意的地方:WebStorm自带,IDEA要在插件中去下载。需要在Preferences-Build,Execution,Deployment-Debugger-LiveEdit中的Update选择Autoin(ms),默认是毫秒自动更新一次,不用改也可以用,这样才可以自动更新。由于网上关于LiveEdit使用的文章大都是好久之前写的,和现在的版本不一样了,网上说是在View下勾选LiveEdit,可是这个勾选在我的电脑上没有,原来是将LiveEdit变成了JavaScriptdebugsession的一部分,也就是在调试模式的时候自动打开了,这些网上都没有资料说,我也是看了官方文档才知道的,在插件中点击链接就能够进入官方文档查看细节。同样也需要Chrome插件的支持:JetBrainsIDESupport。

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

现有工具的缺点

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

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

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

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

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

varchrome=Application(GoogleChrome);varactiveTab=chrome.windows[0].activeTab;activeTab.reload();

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

在上面的服务收到选择没有输入,再改个名字,就能保存了。然后去设置-键盘-快捷键-服务-找到刚才保存的服务名字,设置一个快捷键就好了。我设置的是Command+3,因为这样设置和Command+R很像,虽然偶尔有快捷键冲突,不过大多数时候还好。

有没有更好的方法?

上面的方法虽然能够实现跨屏刷新,不用鼠标滑到另一个屏幕,不过还是需要自己点一下刷新,继续寻找合适的解决方案。

页面引入js库文件

live.js和cssrefresh.js。这两个JavaScript库可以实现本地文件修改后浏览器自动刷新,而且CSS更改不用刷新,样式直接改变。我很有兴趣这是怎么做到的,看了一下它们的原理,是一直不停的请求页面中引入的文件,如果发生了改变,就重新渲染,这么做总觉得怪怪的。

无需支持的Chrome插件

SmartF5,







































白癜风能怎样根治
西安治疗白癜风的医院



转载请注明:http://www.guyukameng.com/php/8541.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了