BrowserSync-多浏览器测试工具
自动刷新
自动刷新,顾名思义,就是不用我们去F5刷新。假设有一天我们写代码,只需要ctrl + s,在浏览器上马上就能看到页面效果,这无非就是自动刷新的范例。而BrowserSync帮助我们做到这件事儿。当然我这儿只是简单地记录下它的应用。
介绍BrowserSync
BrowserSync的一般用法则不需要浏览器插件,也不用手工添加代码(尽管也提供那样的用法)。一句控制台的命令之后,无论是在手机里还是电脑,无论用多少个浏览器(经测试,IE8+及其它),都可以拥有自动刷新的功能。详细请见官网
BrowserSync具体使用
要安装它,必然先有Node,这个就不多说。
1 | npm install -g browser-sync |
如果您只希望在对某个css
文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令:
1 | browser-sync start --server --files "css/*.css" |
如下:
你这样启动之后,你可以用谷歌浏览器、火狐浏览器、手机、ipad等同时访问 http://10.58.184.219:3000
而当我改变css时,各个浏览器上会相应的变化:
若是还想监听别的,例如html、或者整个项目,可以直接写成:
1 2 3 | browser-sync start --server --files "**/*.css, **/*.html" browser-sync start --server --files "**" |
BrowserSync配合gulp
Gulp是现在流行的自动化工具,但BrowserSync并没有Gulp插件版,因为并不需要。BrowserSync有自己独立的API,将它注册为gulp的一个task即可。下面是一段gulpfile.js
的示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 | var gulp = require( 'gulp' ); var browserSync = require( 'browser-sync' ); gulp.task( 'browser-sync' , function() { browserSync({ files: "**" , server: { baseDir: "./" } }); }); gulp.task( 'default' , [ "browser-sync" ]); |
然后执行gulp(当然前提,先得去npm install gulp和browser-sync)
这儿的效果跟单独用browser-sync是一样的。
这篇文章所用的demo其实就是从官网上下载下来的实例:源代码
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战