Browsersync(浏览器同步测试工具)配置教程

最近在开发前端,要不断查看html或js的更改效果,于是找到了这一款工具,可以自动刷新,免除了不断F5的痛苦^_^.

配置教程:

1. 安装Node.js

BrowserSync是基于Node.js的,是Node模块

2. 安装BrowserSync

从Node.js的包管理(NPM)库中下载BrowserSync (-g是全局安装,即可在任何目录中使用)

npm install -g browser-sync

注意: 在下载之前最好配置国内的npm源,找到 .npmrc 文件, 打开添加一行:

registry = https://registry.npm.taobao.org
或者
npm config set registry https://registry.npm.taobao.org
// 配置后可通过下面方式来验证是否成功
npm config get registry
临时使用的话
npm –registry https://registry.npm.taobao.org install express

3.启动BrowserSync

静态网站

注意以下参数前均为两个横杠: - - 注意鉴别

如果想监听js,css,html等的静态内容可使用服务器模式:
cd到需要监听的目录下,启动命令行窗口,输入:

browser-sync start –server –files “**/*.css, **/*.html”

即可自动打开一个新的浏览器窗口,同步代码修改.

动态网站

如果已经有了其他的本地服务器环境,则需要使用代理模式.BrowserSync将通过代理URL来查看网站

browser-sync start –proxy “主机名” –files “**/*.css, **/*.html”

比如:
browser-sync start –proxy “localhost:8080” –files “**/*.css, **/*.html”