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實現? 有待研究