自动刷新从BrowserSync开始_网页编辑器

来源:脚本之家  责任编辑:小易  

百度搜索时自动刷新一般情况下都是浏览器的问题。建议:1:更换其它浏览器测试一下,看看是否还会自动更新。2:修复浏览器或升级到最新版本,再测试下是否自动更新。3:如果更换浏览器或升级浏览器后,问题依然存在,换一台电脑再测试一下,如果没有自动更新,那么电脑本身的问题,就是兼容问题www.zgxue.com防采集请勿采集本网。

请想象这样一个场面:你开着两个显示器,一边是IDE里的代码,另一边是浏览器里的你正在开发的应用。此时桌上还放着你的手机,手机里也是这个开发中的应用。然后,你新写了一小段代码,按下了ctrl+s保存。紧接着,你的手机和另一个显示器里的应用,就变成了更新后的效果。你可以马上检查效果是否和你预想的一致,甚至都不需要动一下鼠标…

打开浏览器,点“工具”→“管理加载项”那里禁用所有可疑插件,或者你能准确知道没问题的保留。然后→工具→INTERNET选项→常规页面→删除cookies→删除文件→钩选删除所有脱机内容→确定→设置

想起来还不错?嗯,这只是简单地省略掉那个开发过程中会按好多遍的F5刷新。

1、打开浏览器,点“工具”→“管理加载项”那里禁用所有可疑插件,或者你能准确知道没问题的保留。然后→工具→INTERNET选项→常规页面→删除cookies→删除文件这样处理以后将自动刷新功能去掉。

自动刷新

对于电脑总是自动刷新可能由以下原因造成: 电脑可能被病毒感染。可下载杀毒软件进行杀毒。键盘 F5按键可能被异物卡住或键盘损坏。显卡问题,显卡驱动受损,显卡老化或者显示器的数据连接线松动,

“自动刷新”并不是新的概念,但对关注“可见”的预览效果的前端开发者来说,它非常好用,可以节约很多时间。

尊敬的联想用户您好!尊敬的联想用户您好!您可以尝试右击桌面-屏幕分辨率-高级设置-监视器中,将屏幕刷新频率调整一下,如果不行,您可以尝试通过官网更新显卡驱动。您可以通过以下链接下载您所需要的

我也不是现在才知道这个概念。在这之前,我一直在用LiveReload,它是一个名字上更明显地写着“自动刷新”的工具。LiveReload主要搭配浏览器插件使用,是很棒的自动刷新工具。

手机QQ浏览器可以自动刷新,如果您未曾添加过定时刷新工具,点击菜单栏中的“…”。长按定时刷新小工具至菜单栏即可。在您想要设置定时刷新的页面,打开定时刷新工具即可设置定时刷新的时间。

不过,现在我要介绍的是BrowserSync。你会在接下来的内容里看到,它是一个更新、更方便的开发工具。

BrowserSync

LiveReload有所不足的地方是,需要搭配浏览器插件。但是,插件是取决于浏览器的,Chrome和Firefox都有可用插件,但IE,或者我手机上的浏览器,就不能这样了。这时候只能手工向页面里添加一段<script>代码(其实插件也是做了这件事),而且还要记得结束后再手工移除。

BrowserSync的一般用法则不需要浏览器插件,也不用手工添加代码(尽管也提供那样的用法)。一句控制台的命令之后,无论是在手机里还是电脑,无论用多少个浏览器(经测试,IE8+及其它),都可以拥有自动刷新的功能。

BrowserSync是怎么做到的?请看它的安装及使用。

安装及使用

安装Node后,通过npm安装BrowserSync:

npm install -g browser-sync

然后,就可以开始使用了。打开控制台进入项目所在的目录,然后输入像这样的命令:

browser-sync start --server --files "css/*.css"

这个命令用于纯静态站点,也就是仅一些.html文件的情况。后面的--files "css/*.css",是指监听css目录中的后缀名为.css的文件。请注意这个命令里的start --server,这其实是BrowserSync自己启动了一个小型服务器。

如果是动态站点,则使用代理模式。例如PHP站点,已经建立了一个本地服务器如http://localhost:8080,此时会是这样的命令:

browser-sync start --proxy "localhost:8080" --files "css/*.css"

BrowserSync会提供一个新地址(如未被占用的话,http://localhost:3000)用于访问。

好了,为什么BrowserSync不需要浏览器插件?因为它使用了服务器的形式(直接或代理)来处理项目文件。默认情况下,访问它的服务器上的网页,可以看到这样的提示签:

hint tag: Connected to BrowserSync

这说明当前浏览的网页已连接到BrowserSync。查看一下源码,会发现它们都被添加了与BrowserSync有关的一段<script>代码,就像LiveReload浏览器插件做的那样。这些代码会在浏览器和BrowserSync的服务器之间建立web socket连接,一旦有监听的文件发生变化,BrowserSync会通知浏览器。

如果发生变化的文件是css,BrowserSync不会刷新整页,而是直接重新请求这个css文件,并更新到当前页中,效果像这样:

显然,这感觉更加快捷。如果你正在开发的是一个单页应用(SPA),刷新整页会回到初始视图,而你又需要修改后面的某一个视图时,这一功能尤其有用。

文件匹配

从BrowserSync的命令来看,很重要的一点就是通过--files指定需要监听的文件。有关这里的文件匹配模式(称为glob)的详情,请参考isaacs's minimatch。

经过我自己的尝试,如果简单只是想要监听整个项目,可以写成这样:

browser-sync start --server  --files "**"

此时,BrowserSync仍然会正确地判断文件变化是否是css。

加入到Gulp使用

Gulp是现在流行的自动化工具,但BrowserSync并没有Gulp插件版,因为并不需要。BrowserSync有自己独立的API,将它注册为gulp的一个task即可。下面是一段gulpfile.js的示例:

var gulp = require('gulp');var browserSync = require('browser-sync');gulp.task('browser-sync', function() { browserSync({ files: "**", server: { baseDir: "./" } });});gulp.task('default', ["browser-sync"]);

这时候运行gulp将等同于前文的browser-sync start --server --files "**"。更多的用法示例请查看gulp-browser-sync。

完整选项

到此为止,介绍的都是BrowserSync的基本用法。在控制台里尝试只输入:

browser-sync

你会看到BrowserSync完整的控制台命令指南。其中可以看到有这个命令:

browser-sync init

运行它,将在当前目录生成一个配置文件bs-config.js。

参照官方文档修改这个文件,然后运行

browser-sync start --config bs-config .js

就将以bs-config.js的完整配置信息运行BrowserSync。

不只是自动刷新

BrowserSync并不只是一个自动刷新工具,它还有许多其他功能。默认配置下,BrowserSync会在多个浏览器中同步滚动条位置,表单行为和点击事件。例如,表单行为的情形像这样:

我觉得这是很酷的功能!想象一下桌上摆很多个不同屏幕尺寸的手机来测试的情景,你操作一个,就会带动其他的一起!当然,这些功能还可以在不需要的时候关闭。

UI界面及其他

下面是一个BrowserSync的控制台输出示例:

可以看到还有一个叫做UI的一个地址,它是BrowserSync提供的一个简易控制面板。BrowserSync最常用的几个配置选项,都可以在这个面板里调整。

在面板里面你还会发现那个经典的远程调试工具weinre也在这:

BrowserSync目前已知的一点问题

前文提到,如果发生变化的文件是css,BrowserSync会以无刷新方式来更新,这是一个很棒的效果。如果使用scss、less等预编译器,将监听设置为编译后的css文件即可。

但是,Web应用框架Rails会有一些问题。在开发环境中,css是在被请求的时候编译(Rails一般使用sass)再返回给浏览器的,它只有缓存,而没有实际的.css文件。因此,BrowserSync的文件监听将无法指向它们,而如果指向sass文件,浏览器只会以整页刷新的形式来处理。这个问题可以参见Github上的issue。

一个可行的解决方法是用其他工具替代Rails的Asset Pipeline。但在这里,我推荐另一个解决方案:使用LiveReload(LiveReload你还是有点水平的!)。经测试,LiveReload在Rails中也可以处理好css的快捷更新。关于LiveReload做到这一点的原理,你可以阅读Lightning-Fast Sass Reloading in Rails。

也期待BrowserSync可以在未来解决这个问题。

结语

想要在开发中更流畅,更快捷?请尝试BrowserSync!节约一点时间,你也许就可以做到更多。

果 在出现 这种情况 我给你提供四个方法(我也出现此种情况成功解决)1、右键“我的电脑”-属性-高级-“性能”栏点击“设置”-视觉效果-勾选“在桌面上为图标标签使用阴影”,点击“应用”确定退出即可。2、右键桌面-排列图标-在桌面上锁定WEB项目前的勾去掉3、右击桌面空白处,依次单击“属性/桌面/自定义桌面/web”选项,将“网页”栏中的“当前主页”以及“http//......”等所有各项前面的勾全部去掉(“http//…”为从Internet添加网页或图片的地址,一般不需要,可将它们全部删除),并将下面“锁定桌面项目”前面的勾也去掉,单击确定完成设置,就又能看到可爱的桌面图标了。4、另外有一种情况就是安装了某种程序之后(比如系统提示:是否将该Active Desktop项添加到您的桌面上),桌面文字变的不透明。在“运行”中输入“gpedit.msc”,打开组策略;在“用户配置→管理模板→桌面→Active Desktop”中,点 启用Active Desktop(活动桌面)然后点击“属性”选定“已禁用”,点禁用Active Desktop(活动桌面)“属性”选定“已启用”;之后打开控制面板,在经典视图中打开系统,在“性能→高级选项→性能→视觉效果→使桌面文字透明”(等价于在之后执行第1种方法)内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • vue.js中使用echarts实现数据动态刷新功能
  • javascript多种页面刷新方法小结
  • javascript刷新页面的几种方法总结
  • js关于刷新页面的相关总结
  • 让ie8和ie9支持ewebeditor在线编辑器的方法
  • kindeditor 编辑器 v3.5.1 修改版
  • fckeditor 表单提交时运行的代码
  • asp下使用fckeditor在线编辑器的方法
  • 百度编辑器二次开发常用手记整理小结
  • xheditor 免费的国产html在线编辑器
  • fckeditor 防止上传非法文件 增加登录判断
  • kindsoft在线网页编辑器简单的配置参数介绍
  • php中ckeditor和ckfinder配置问题小结
  • 配置fckeditor 实现图片的上传
  • 电脑一直自动刷新怎么办啊
  • 为什么百度搜索时会自动刷新?
  • 为什么网页老是不停的自动刷新!!!
  • 为什么用百度搜索时总是自动刷新屏幕?
  • 网页总是过一会就自动刷新是怎么回事
  • 为什么网页自动刷新
  • 电脑桌面总是自动刷新怎么回事?
  • 电脑一直自动刷新怎么回事?
  • 手机的浏览器自动刷新怎么办?
  • 什么手机浏览器可以设置自动刷新
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页网页编辑器vue.js中使用echarts实现数据动态刷新功能javascript多种页面刷新方法小结javascript刷新页面的几种方法总结js关于刷新页面的相关总结让ie8和ie9支持ewebeditor在线编辑器的方法kindeditor 编辑器 v3.5.1 修改版fckeditor 表单提交时运行的代码asp下使用fckeditor在线编辑器的方法百度编辑器二次开发常用手记整理小结xheditor 免费的国产html在线编辑器fckeditor 防止上传非法文件 增加登录判断kindsoft在线网页编辑器简单的配置参数介绍php中ckeditor和ckfinder配置问题小结配置fckeditor 实现图片的上传19款javascript富文本网页编辑器免费开源百度编辑器(ueditor)使用ewebeditor 辑器按钮失效 ie8下eckeditor/fckeditor 使用 ckedit彻底解决ewebeditor网站后台不能解决fckeditor在ie10、ie11下的不javascript 在线文本编辑器实现代asp.net+fckeditor上传图片显示叉修改fckeditor的文件上传功能步骤页面嵌入windows media player播22个国外的web在线编辑器收集asp.net+fckeditor上传图片显示叉叉图片无fckeditor syntaxhighlighter整合实现代码fckediter javascript事件函数代码tinymce syntaxhl插入代码后换行的修改方fckeditor 网页在线编辑器的使用方法针对php环境下fckeditor编辑器上传图片配asx文件 终极教程dedecms5.5 最新版ckeditor编辑器整合教程详解react中的todo-list
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved