Browser-sync

Official Site https://browsersync.io/

启动服务

$ browser-sync start [options]     Start Browsersync

初始化一个配置文件 (默认是bs-config.js)

$ browser-sync init                Create a configuration file

假如我想对abc.com 做sync
(abc.com运行在一台10.1.1.1的开发机上, 其端口为3456)
该站点的静态文件路径是
abc.com/resource/....

作如下配置

module.exports = {
  proxy: '10.1.1.1:3456',
  host: 'abc.com',
  port: 80,
  files: ['.tmp/**/*.*'],
  serveStatic: [{
    route: '/resource',
    dir: '.tmp/resource'
  }],
  open: false,
  notify: false
};

上面表示针对abc.com的静态资源做sync

指定配置启动

sudo browser-sync start --config bs-config.js
Password:
[BS] Proxying: http://10.0.0.1:3456
[BS] Access URLs:
 ---------------------------------------
       Local: http://localhost:80
    External: http://abc.com:80
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://abc.com:3001
 ---------------------------------------
[BS] Watching files...

UI:启动后会生成一的可视化配置界面地址

sync同时启动了一个80端口的服务,
访问下这个试试
http://localhost:80/browser-sync/browser-sync-client.js

Sync会向页面注入这么一段JS

<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.18.11'><\/script>".replace("HOST", location.hostname));
//]]></script>

如果你SwitchSharp代理 将abc.com代理到10.0.0.1:3456上
而这个script会发一个
abc.com/browser-sync/browser-sync-client.js 这样的请求
显然开发机上并没有处理这个路径的服务

前面也说了 sync本地起了一个80端口的服务,
所以把abc.com/browser..... 映射为 localhost:80/browser....
那就改改hosts吧

vim /etc/hosts

貌似可以通过Charles实现?
有待研究