最近在开发前端,要不断查看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”