省时的浏览器同步测试工具--Browsersync,释放你的f5
功能展示
修改代码后按ctrl + s 保存后,页面实时同步刷新,免去了按f5的时间
打开滚动同步的功能后,滑动当前的页面,其他浏览器的同一个页面、其他设备的同一个页面同时滚动。
对前端开发同学来说非常友好哦
特点
- 【热加载】让浏览器实时、快速响应文件的更改,任何一次代码保存,PC、平板、手机等设备都会同时显示改动,使用它将提高您30%的工作效率(热加载)
- 【页面同步】在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中,这一切还可以通过可视化界面来控制。
- 【兼容性】不需要安装浏览器插件即可使用
使用范围
- 移动端、PC端等多段设备都可兼容。
- 浏览器直接访问ip+端口即可。
区别(为什么用它)
-
与liveReload的区别
- LiveReload需要搭配浏览器插件。插件是取决于浏览器的,Chrome和Firefox都有可用插件,但IE,或者手机上的浏览器,就不能正常使用了,而BrowserSync的一般用法则不需要浏览器插件所以所有平台都可以使用。
-
与 vue 的热加载的区别
- vue的热加载功能是搭建在vue-cli脚手架上的,而BrowserSync不需要搭建任何框架,能更快速的使用。
总的来说,BrowserSync可以无视浏览器、无视设备、无视框架快速使用
原理
- Browsersync的工作原理是在
<body>
标签之后插入初始请求的 (<script async>...</script>)异步脚本标记, 为了能够正常工作<body>
标签必须存在。
安装
-
安装 Node.js
- BrowserSync是基于Node.js的, 是一个Node模块。
-
安装 BrowserSync
- 全局使用
npm install -g browser-sync
- 结合gulpjs等构建工具使用
- 全局使用
使用(browserSync初体验)
启动 BrowserSync
-
正常使用(静态项目使用browsersync)
- 在项目目录下打开命令窗口(目录名不能为中文名)
-
在命令窗口处输入代码(输入命令后 BrowserSync 将启动一个小型服务器,并提供一个URL来查看您的网站。)
// 监听css文件 browser-sync start --server --files "css/*.css" // 监听css和html文件(如果需要监听多个类型的文件,只需要用逗号隔开) browser-sync start --server --files "**/*.css, **/*.html,**/*.js"
-
使用代理模式(动态项目使用browsersync,有其他本地服务器环境情况下)
-
BrowserSync通过代理URL(localhost:3000)来查看网站
// 主机名可以是ip或域名 browser-sync start --proxy "主机名" "css/*.css"
-
-
结合配置文件使用
- 在控制台/命令窗里输入
browser-sync init
,就会在当前目录生成一个配置文件bs-config.js - 修改好配置文件后在控制台里输入
browser-sync start --config bs-config .js
就将以bs-config.js的完整配置信息运行BrowserSync。 -
常用配置
-
files
//单个文件 browserSync({ files: "app/css/style.css" }); //多个文件 browserSync({ files: ["app/css/style.css", "app/js/*.js"] }); //格式 + 1 自定义回调 // 2.6.0自 browserSync({ files: [ "wp-content/themes/**/*.css", { match: ["wp-content/themes/**/*.php"], fn: function (event, file) { /** Custom event handler **/ } } ] });
-
server 使用内置的静态服务器创建基本的HTML / JS / CSS的网站。
//从应用程序目录中的文件即成 server: { baseDir: "app" } //从与目录列表的应用程序目录中的文件即成 server: { baseDir: "app", directory: true } //多个基目录 server: { baseDir: ["app", "dist"] } //从应用程序目录中提供文件,指定特定文件名为索引 server: { baseDir: "app", index: "index.htm" } //由于1.2.1版本 //关键是URL匹配 //值是文件夹要提供的(相对于当前的工作目录) server: { baseDir: "app", routes: { "/bower_components": "bower_components" } } //自定义中间件 server: { baseDir: "./", middleware: function (req, res, next) { console.log("Hi from middleware"); next(); } } //多个自定义中间件 server: { baseDir: "./", middleware: [ function (req, res, next) { console.log("Hi from first middleware"); next(); }, function (req, res, next) { console.log("Hi from the second middleware"); next(); } ] }
-
port 指定端口号
//使用(而不是一个自动检测到Browsersync)特定端口 port: 8080
-
https 启用HTTPS本地主机。 注意 - 这是没有必要的代理选项,因为它会从你的目标URL推断。
//启用HTTPS静态文件服务器 browserSync({ server: "./app", https: true }); //启用HTTPS的片段模式 browserSync({ https: true });
-
ghostMode 点击,滚动和表单在任何设备上输入将被镜像到所有设备里(当然你必须正确使用了Url)
//在这里你可以禁用/启用 每个单独的功能 ghostMode: { clicks: true, forms: true, scroll: false } //或使它们全部关闭,一气呵成 ghostMode: false
-
open 决定Browsersync启动时自动打开的网址。默认为“本地”,如果没有设置
//停止自动打开浏览器 open: false //打开本地主机URL open: "local" //打开外部URL -必须在网上 open: "external" //打开用户界面-自从2.0.0 open: "ui" //打开隧道网址-还必须设置`tunnel`选项 open: "tunnel"
-
browser 指定浏览器打开
//在Chrome浏览器中打开网站 browser: "google chrome" // 在chrome、firefix下打开该站点 browser: ["google chrome", "firefox"]
-
startPath 指定起始路径,打开浏览器
// URL处打开一个浏览器窗口+“/info.php” startPath: "/info.php"
-
- 更多配置信息请到官网查看:http://www.browsersync.cn/doc...
- 在控制台/命令窗里输入
browserSyn常用命令行
-
browserSync命令行方法
-
命令行常用方法:browser-sync start
<options>
--server 运行本地服务器(使用您的CWD作为Web根)(类似于anywhere启动服务) --files 监测的文件路径 ("**/*.css, **/*.html,**/*.js") --startPath 指定起始路径,打开浏览器 --open 选择哪个URL是自动打开(本地,外部或隧道) --https 用https协议打开 --port 指定要使用的端口 --url 提供完整的URL运行Browsersync实例 --ui-port 指定端口的UI使用 --no-ui 不要启动用户界面 --no-open 不要打开一个新的浏览器窗口 --config 指定为BS-config.js文件的路径 reload 重载 --files 文件路径重载 --port 通过目标端口号的运行实例 --url 提供完整的URL运行Browsersync实例
-
- 更多命令请到官网查看:http://www.browsersync.cn/doc...
其他
-
UI界面
- 控制台启动browserSync后,通过控制台给出的地址进入ui界面,它是BrowserSync提供的一个简易控制面板。
- 如果发生变化的文件是css,BrowserSync会以无刷新方式来更新。如果使用scss、less等预编译器,将监听设置为编译后的css文件即可。
参考地址
最后
本文章仅提供简单的使用教程,如需跟深层次的学习,请到官网或者找寻其他资料来学习。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。