最近公司趕一個項目，是mobile端，之前沒怎么做過移動端的開發，這個項目算是個小嘗試。
在做項目的過程中，用到了一個神器--browser-sync，在這里分享給大家。
1、靜態頁面調試
作為前端，肯定是要保證頁面的兼容性的。
通常的測試場景是，前端人員人手N部測試機，改下頁面，依次手動刷新各個手機，真的非常蛋疼，這些重復性的工作，不應該由人來完成，而應該由機器來自動完成，這時，browser-sync就體現出了它的巨大價值。
有了它，前端人員就能從繁瑣的重復性工作中解脫出來，更專注的解決技術上的問題。
browsersync 依賴node.js，如何安裝node.js這里就不再贅述了。
命令行上敲入下面的命令，全局安裝上browser-sync：
npm install -g browser-sync
安裝完成之后，我們就可以開始啟動調試了。
在調試之前，我們需要把確保測試用的手機和本地開發的機器同處在一個局域網中。
啟動調試我們分兩中情況進行處理：
A、本地沒有搭建服務器環境的
針對單純的靜態頁面，我們需要使用到browser-sync 的 --server 命令。
假設我的靜態頁面都在C:\wamp\www\openadmin\style\html\目錄下，
通過控制台進入到C:\wamp\www\openadmin(即把改目錄當初server的root目錄)，敲入下面的命令：
browser-sync start --server --files "style/html/*.html"
即可看到本地服務器的啟動。
地址欄輸入 http://localhost:3000/style/html/module.html即可看到該頁面。
給瀏覽器裝上一個二維碼插件，測試手機依次掃過二維碼，打開module.html頁面。
我們在開發機器上修改module.html頁面，這時奇跡出現了，N部打開了該頁面的手機瀏覽器都同時刷新，酷，任性！
依葫蘆畫瓢，調試走起！
B、本地已經搭建了服務器環境的
我在本地搭好服務器，設置了vhost local.openadmin.com 指向 C:\wamp\www\openadmin\目錄
這時我只需在控制台敲入下面的命令：
browser-sync start --proxy local.openadmin.com --files "style/**"
即可啟動服務。
地址欄輸入 http://localhost:3000/style/html/module.html即可看到該頁面。
-------------------------------------------寂寞冷的分割線------------------------------------------------------
更多信息大家可以移步 browser-sync 的官網 http://www.browsersync.io/
以上，謝謝