默认 Browsersync 提供的服务器只能处理 html,css 还有 javascript , 你的应用可能需要一些其它的技术,比如 WordPress,Drupal,Laravel 都需要可以运行 PHP 的服务器 ..
你可以正常运行这些应用,然后把它们的服务器设置成代理,这样我们就可以使用 Browsersync 提供的同步浏览器的功能了。
在这里运行的是一个 Meteor 的应用,服务的地址是 localhost:9090 ... 下面可以去把它设置成一个代理 .. 回到终端 .. 新建一个标签 ...
输入 browser-sync start,后面加上一个 --proxy 选项 .. 在它后面指定一下代理服务的地址 .. 这里就是 Meteor 应用运行的那个地址 .. localhost:9090 .. 回车执行一下 ..
会提示代理是 localhost:9090 .. 使用 Access URLs 下面的地址,就可以访问到这个 Meteor 应用了 .. 可以在几个浏览器上打开这个地址 ... localhost:3000 或者使用 192.168.1.140:3000 ..
回到浏览器 ... 可以再新建一个标签 .. 然后再打开这个地址 ..
点击边栏上的链接 ... 会在所有浏览器上同步页面的变化 ... 勾选一下复选框 ... 也会同步变化 .. 新建一个列表 .. 在左边这个浏览器上你会看到这个新创建的列表 ..
再输入点东西,在所有浏览器上会实时显示输入的东西 .. 再点下这个 Join 按钮 ... 同样其它的浏览器也会同步页面的变化 ..
有个地方要注意一下,就是代理的地址可能是你手工编辑本地电脑的 hosts ,设置的一个虚拟的主机名 .. 比如 ninghao.local ... 实际上这个主机名指向的是本地的电脑,或者某个内网的 IP 地址 .. 注意,要想使用 Browsersync ,你的这个主机名要是 .dev,比如 ninghao.dev ,不然会非常慢。