webpack之browser-sync的使用

browser-sync介绍:省时的浏览器同步测试工具(官方在中文网站)

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

webpack之browser-sync的使用_第1张图片
sync-demo.gif

有了它,您不用在多个浏览器、多个设备间来回切换,频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中,这一切还可以通过可视化界面来控制。

webpack之browser-sync的使用_第2张图片
scroll-demo.gif

使用步骤

  1. BrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js .
  2. 安装 BrowserSync
  npm install -g browser-sync   //全局安装
  npm install --save-dev browser-sync   //本地安装 安装到开发环境中 写入package.json 配置文件中,
  1. 启动 BrowserSync
// --files 路径是相对于运行该命令的项目(目录) 
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"
// 监听css文件 
browser-sync start --server --files "css/*.css"
// 监听css和html文件 
browser-sync start --server --files "css/*.css, *.html"

你可能感兴趣的:(webpack之browser-sync的使用)