省时好用的浏览器同步测试工具Browsersync

省时的浏览器同步测试工具

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

省时好用的浏览器同步测试工具Browsersync_第1张图片
  1. 安装 Node.js
    参照安装node.js
  2. 安装 BrowserSync
npm install -g browser-sync
  1. 启动 BrowserSync

一个基本用途是,如果您只希望在对某个css文件进行修改后会同步到浏览器里。

如果您需要监听多个类型的文件,您只需要用逗号隔开。
打开您的命令行工具,进入到项目目录下,运行以下其中一条命令。Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000地址,这一切都会在命令行工具里显示。

// --files 路径是相对于运行该命令的项目(目录 不能是中文路径) 
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"

你可能感兴趣的:(省时好用的浏览器同步测试工具Browsersync)