应用场景
当我们需要在 PC、安卓手机、苹果手机、ipad、一体机等等多种不同设备调试同一个页面时，每个滑动点击操作都要在每个设备上来一遍，这样重复性的工作我们可以用 browser-sync 自动实现
准备工具
1.nodejs
2. 安装 npm (一般安装 node 的同时已经安装)
安装 browser-sync
在命令行输入 npm i browser-sync -g
一般安装为全局工具
注意
在 windows 安装可能会报以下错误
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\browser-sync\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
解决办法是安装 Visual Studio
然后重新安装
使用
browser-sync start --server ./ --files *
–server 是监听的 文件目录
–files 是监听的 文件
访问
启动后命令行如下
访问 3000 端口的地址是你的站点，3001 是 browser-sync 的后台管理
代理
我们经常需要调试已经部署在服务器的网站，这个时候可以用 browser-sync 的代理功能browser-sync start --proxy http://news.baidu.com/
–proxy 后面为代理地址
脚本嵌入
还可以通过脚本嵌入的方式使用，执行 browser-sync start
会看到如下图:
复制代码到页面
<script id="__bs_script__">//<![CDATA[document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
//]]></script>也可以愉快的调试 ^_^
以上是经常会用到的命令，更多命令请查看官网