Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。
一 主要特点
(一)交互同步
滚动,点击,刷新等操作可以在不同浏览器之间同步更新。有了它,不用在多个浏览器、多个设备间来回切换,频繁的刷新页面。只需在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中,这一切还可以通过可视化界面来控制,即可在屏幕上查看多个不同设备对代码修改的效果。
(二)文件同步
当您改变HTML,CSS,图像和其他项目文件浏览器会自动更新。
(三)URL历史
记录您的测试网址,您只需点击一次,就可以在不同设备里访问。
(四)记录修改历史
记录每一次对任何一个文件的修改。
二 安装使用
(一)安装 Node.js
BrowserSync是基于Node.js的, 是一个Node模块,想要使用它,需要先安装一下Node.js
(二)安装 BrowserSync
您可以选择从Node.js的包管理(NPM)库中 安装BrowserSync。打开一个终端窗口,运行以下命令:
npm install -g browser-syn
如果npm下载速度过慢,可采取以下方式,安装npm镜像:cnpm。
1).安装cnmp:
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.)安装BrowserSync
cnpm install -g browser-sync
npm将告诉包管理器下载BrowserSync文件,并在全局下安装它们,您可以在所有项目(任何目录)中使用。
(三) 启动 BrowserSync
全局安装Browsersync后,你可以这样运行它:
$ browser-sync start <options>
Options表示多个不同的命令:
--help 输出使用信息
--version 输出的版本号
--browser 选择哪个浏览器应该是自动打开
--files 文件路径看
--exclude 文件模式忽视
--server 运行本地服务器(使用您的CWD作为Web根)
--index 指定哪些文件应该被用作索引页
--extensions 指定文件扩展名回退
--startPath 指定起始路径,打开浏览器
--https 启用SSL地方发展
--directory 显示服务器的目录列表
--proxy 代理现有的服务器
--xip 使用xip.io域路由
--tunnel 使用公共网址
--open 选择哪个URL是自动打开(本地,外部或隧道)
--config 指定为BS-config.js文件的路径
--host 指定主机名使用
--logLevel 设置记录器输出电平(沉默,信息或调试)
--port 指定要使用的端口
--reload-delay 以毫秒为单位的时间延迟重装事件以下文件的变化
--reload-debounce 限制在浏览器中的频率:刷新事件可以被发射到连接的客户机
--ui-port 指定端口的UI使用
--no-notify 禁用浏览器的通知元素
--no-open 不要打开一个新的浏览器窗口
--no-online 强制离线使用
--no-ui 不要启动用户界面
--no-ghost-mode 禁用幽灵模式
--no-inject-changes 刷新上的每个文件更改
--no-reload-on-restart 不要自动重新加载在重新启动所有浏览器
使用方法:
如果希望在对某个文件进行修改后会同步到浏览器里。只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令:
例如:
// --files 路径是相对于运行该命令的项目(目录)
$ browser-sync start --server --files "css/*.css"
监听多个类型的文件,只需要用逗号隔开
// --files 路径是相对于运行该命令的项目(目录)
$ browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。
$ browser-sync start --server --files "**/*.css, **/*.html"
在此之前,我们每改一次的代码,都需要手动去刷新一次页面,查看我们的改动是否正确;现在,BrowserSync减少了重复的手工任务,这一切都交给BrowserSync去完成,我们只需专注在业务的逻辑里去。可以在不同的设备及浏览器里进行调试。就连UI都可以运行在浏览器 - 尝试在另一台设备上创建第二页面来控制您的BrowserSync。
通过可视化的操作方式或命令行来创建个性化的测试环境,实现多设备共同响应。