官方介紹：
Browsersync能讓瀏覽器實(shí)時(shí)、快速響應(yīng)您的文件更改（html串远、js否彩、css疯攒、sass、less等）并自動(dòng)刷新頁(yè)面列荔。更重要的是 Browsersync可以同時(shí)在PC敬尺、平板枚尼、手機(jī)等設(shè)備下進(jìn)項(xiàng)調(diào)試。您可以想象一下：“假設(shè)您的桌子上有pc砂吞、ipad署恍、iphone、android等設(shè)備蜻直，同時(shí)打開(kāi)了您需要調(diào)試的頁(yè)面盯质，當(dāng)您使用browsersync后，您的任何一次代碼保存概而，以上的設(shè)備都會(huì)同時(shí)顯示您的改動(dòng)”唤殴。無(wú)論您是前端還是后端工程師，使用它將提高您30%的工作效率到腥。
點(diǎn)我直達(dá)官方網(wǎng)站
有了它朵逝，您不用在多個(gè)瀏覽器、多個(gè)設(shè)備間來(lái)回切換乡范，頻繁的刷新頁(yè)面配名。更神奇的是您在一個(gè)瀏覽器中滾動(dòng)頁(yè)面、點(diǎn)擊等行為也會(huì)同步到其他瀏覽器和設(shè)備中晋辆，這一切還可以通過(guò)可視化界面來(lái)控制渠脉。
了解完了，心動(dòng)了瓶佳，但是安裝配置卻把我搞殘了芋膘，懵懵懂懂搞了兩天終于配置成功，趁熱打鐵霸饲，記錄下坑爹的問(wèn)題（主要是網(wǎng)上搜了半天为朋，都是只言片語(yǔ)，不夠系統(tǒng)厚脉，重新把捷徑梳理下）：
一习寸、正常安裝流程
- 安裝node.js；
官網(wǎng)下載后下一步即可; - 命令行安裝
npm install -g browser-sync; - 啟動(dòng)命令
browser-sync start --server --files "**/*.*"（注：這里一定要注意傻工，一定要在項(xiàng)目目錄下輸出該命令霞溪，否則報(bào)錯(cuò)；*表示任意層級(jí)的目錄下的所有文件都在監(jiān)測(cè)范圍內(nèi)中捆，我是在mac中測(cè)試后覺(jué)得這個(gè)的表達(dá)最省事鸯匹； - 打開(kāi)
localhost:3000，完成Ｐ刮薄（注：建議目錄下的首頁(yè)勇index.html表示殴蓬，如果沒(méi)設(shè)置多層目用*表示，多半出錯(cuò)）
當(dāng)然臂容，上面是我的安裝流程科雳，簡(jiǎn)化版根蟹，正式文檔在這里點(diǎn)我直達(dá)官方安裝教程脓杉。
二糟秘、問(wèn)題匯總
- node已安裝，執(zhí)行
npm install -g browser-sync;卡死球散，原因是npm下載安裝無(wú)法連接的安裝源尿赚； - mac下執(zhí)行
npm install -g browser-sync;報(bào)錯(cuò)，原因是mac權(quán)限問(wèn)題蕉堰； - 安裝成功后凌净，無(wú)法啟動(dòng)或測(cè)試成功，但出現(xiàn)添加服務(wù)的語(yǔ)句屋讶，如：
<script id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.26.3'><\/script>".replace("HOST", location.hostname));
//]]></script>
[Browsersync] Access URLs:
----------------------------------
UI: http://localhost:3001
----------------------------------
UI External: http://localhost:3001
----------------------------------
原因有兩個(gè)冰寻，一是執(zhí)行時(shí)漏了server只是簡(jiǎn)寫(xiě)browser-sync start --files；二是沒(méi)有在當(dāng)前項(xiàng)目目錄中執(zhí)行語(yǔ)句皿渗；
三斩芭、解決方案
- 更換安裝源，比如淘寶NPM鏡像,更換源的執(zhí)行命令
$ npm install -g cnpm --registry=https://registry.npm.taobao.org; - mac安裝時(shí)真的不想玩兒了乐疆，感覺(jué)搞了半天原來(lái)官網(wǎng)的文檔早有解釋划乖，按照官方的解決路徑，首推安裝npm包管理器挤土，沒(méi)成功琴庵；最后按照官方命令一步一步手工執(zhí)行，成功仰美，大概原理是因?yàn)槟夸浐蜋?quán)限的問(wèn)題迷殿，懵懂中，但畢竟搞定了咖杂，作為新手的成就感還是fell good贪庙！點(diǎn)我放大招;
- 沒(méi)啥說(shuō)的，按我摸索的語(yǔ)句執(zhí)行即可翰苫，記住止邮，在項(xiàng)目目錄內(nèi)執(zhí)行哦！
