BrowserSync,自动刷新,解放F5,去掉更新提示

  BrowserSync虽然这个技术不算新,但是依然有用。略微介绍下

  没有安装node,先安装node,这里不再做介绍

  安装

    npm install -g browser-sync  全局安装,方便在任意目录下启动

  所在项目中启动

    browser-sync start --server --files "**"  所有文件都检测改变刷新,并自动打开浏览器

    http://localhost:3000/ 相当于你的index.html文件,如果你的html文件夹下有个db.html,那么地址就是 http://localhost:3000/html/db.html

  去掉更新成功的 Connected to BrowserSync 提示

    其实这是browser-sync-client.js 动态生成的一个div,id名叫 __bs_notify__ ,那我们直接在在一个公共的css文件下加上以下样式代码即可去掉提示   

         #__bs_notify__{          display: none!important;      }

 

时间: 2024-11-07 11:34:24

BrowserSync,自动刷新,解放F5,去掉更新提示的相关文章

gulp browser-sync自动刷新插件

很久没弄gulp了,都快忘了,今天又来温习下browser-sync 自动刷新插件,在安装的时候出现以下提示: $ npm install browser-sync --save-dev<br>> [email protected] install /usr/local/lib/node_modules/browser-sync/node_modules/socket.io/node_modules/engine.io/node_modules/ws > (node-gyp reb

gulp+browserSync自动刷新页面

BrowserSync "Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试.您可以想象一下:"假设您的桌子上有pc.ipad.iphone.android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动".无论您是前端还是后端工程师,使用它将提高您30%的

gulp自动刷新插件

gulp自动刷新的插件很多,但是感觉最好用的还是 browser-sync 插件.如果不想用命令行,也可以使用 browser-sync界面工具 先安装 browser-sync 插件: npm install browser-sync --save-dev 安装 browser-sync 插件可能遇到的问题 http://www.cnblogs.com/ayseeing/p/4201202.html browser-sync API gulpfile.js文件代码如下: // 先引入依赖模块

BrowserSync,调试利器--自动刷新(转

---恢复内容开始--- 请想象这样一个场面:你开着两个显示器,一边是IDE里的代码,另一边是浏览器里的你正在开发的应用.此时桌上还放着你的手机,手机里也是这个开发中的应用.然后,你新写了一小段代码,按下了ctrl+s保存.紧接着,你的手机和另一个显示器里的应用,就变成了更新后的效果.你可以马上检查效果是否和你预想的一致,甚至都不需要动一下鼠标... 想起来还不错?嗯,这只是简单地省略掉那个开发过程中会按好多遍的F5刷新. 自动刷新 “自动刷新”并不是新的概念,但对关注“可见”的预览效果的前端开

jekyll+livereload+chrome插件-更新文件后自动刷新

2014-08-27 本文不保证成功,window系统会出现各种问题,如若不成功,请直接用livereload的window版,解决,详细可以查看livereload下载对应版本操作,比较傻瓜式: 以下主要介绍的是命令行配置的方式: jekyll+livereload更新后自动刷新,老外的教程,先看看: http://dan.doezema.com/2014/01/setting-up-livereload-with-jekyll/ 1.安装guard-jekyll-plus 时会出错,依赖包版

关于KB905474正版验证补丁破解办法 KB905474是个微软操作系统正版/盗版监测间谍软件。更新安装后,右下角有个提示说“系统监测到你的操作系统是盗版”。 如果没有安装的: 在系统提示更新的时候注意看一下,如果包含有“更新KB905474”就去掉“更新KB905474”方框前的勾,点击关闭(注意如果没有去掉那个勾得话,会找不到“关闭”,而是“确定”),在不在提示我该消息前打勾。 如果已经安装

关于KB905474正版验证补丁破解办法 KB905474是个微软操作系统正版/盗版监测间谍软件.更新安装后,右下角有个提示说“系统监测到你的操作系统是盗版”. 如果没有安装的: 在系统提示更新的时候注意看一下,如果包含有“更新KB905474”就去掉“更新KB905474”方框前的勾,点击关闭(注意如果没有去掉那个勾得话,会找不到“关闭”,而是“确定”),在不在提示我该消息前打勾. 如果已经安装的: 1,  搜索“KB 905474”这个文件,删除. 2,  打开注册表,找到 HKEY_LOC

gulp+browserSync+nodemon 实现express 全端自动刷新的实践

学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究supervisor的时候,突然觉得这东西只有在服务端文件修改时才会触发刷新,前端样式文件模板等等刷新时不会, 能实现前端修改也自动刷新不?想想平时自己用gulp 搭虚拟服务器,用browser自动刷新,于是打算试试. gulp+browserSync 算是原来就有的,现在应该把目标分几步来实现,

Browsersync 浏览器自动刷新

Browsersync 是一个很好用的工具,它可以实时监测文件的变动然后自动刷新浏览器,不用每次去点刷新或F5,特别在调试样式时非常有用. browsersync中文网  http://www.browsersync.cn/ 安装 首先安装node.js(直接下载后安装就行,http://nodejs.cn/download/) > 打开命令行(win+r 然后输入cmd打开命令行)> npm install -g browser-sync (通过npm安装browsersync,如果下载慢的

Browsersync结合gulp和nodemon实现express全栈自动刷新

Browsersync能让浏览器实时.快速响应你的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试.你的任何一次代码保存,以上的设备都会同时显示你的改动". Browsersync可以单独使用,也可以集成到gulp和grunt这样的构建工具中使用,在node.js项目中还能结合gulp-nodemon实现全栈的自动刷新,而在移动端设备上同步调试的功能对移动web开发显然是很有帮助的. 相关网站查看