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%的工作效率曙搬。
有了它摔吏，您不用在多個(gè)瀏覽器、多個(gè)設(shè)備間來(lái)回切換织鲸，頻繁的刷新頁(yè)面舔腾。更神奇的是您在一個(gè)瀏覽器中滾動(dòng)頁(yè)面、點(diǎn)擊等行為也會(huì)同步到其他瀏覽器和設(shè)備中搂擦，這一切還可以通過(guò)可視化界面來(lái)控制稳诚。
1. 安裝Node.js
BrowserSync是基于Node.js的,是Node模塊
2. 安裝BrowserSync
從Node.js的包管理(NPM)庫(kù)中下載BrowserSync
(-g是全局安裝,即可在任何目錄中使用)
npm install -g browser-sync
當(dāng)然您也可以結(jié)合gulpjs或gruntjs構(gòu)建工具來(lái)使用，在您需要構(gòu)建的項(xiàng)目里運(yùn)行下面的命令:
npm install --save-dev browser-sync
3.啟動(dòng)BrowserSync
靜態(tài)網(wǎng)站
注意以下參數(shù)前均為兩個(gè)橫杠: - - 注意鑒別
如果想監(jiān)聽(tīng)js,css,html等的靜態(tài)內(nèi)容可使用服務(wù)器模式:
cd到需要監(jiān)聽(tīng)的目錄下,啟動(dòng)命令行窗口,輸入:
browser-sync start --server --files “**/*.css, **/*.html”
即可自動(dòng)打開(kāi)一個(gè)新的瀏覽器窗口,同步代碼修改.
動(dòng)態(tài)網(wǎng)站
如果已經(jīng)有了其他的本地服務(wù)器環(huán)境,則需要使用代理模式.BrowserSync將通過(guò)代理URL來(lái)查看網(wǎng)站
browser-sync start –proxy “主機(jī)名” –files “**/*.css, **/*.html”
比如:
browser-sync start –proxy “l(fā)ocalhost:8080” –files “**/*.css, **/*.html”
