browsersync能讓瀏覽器自動(dòng)刷新、快速響應(yīng)您的文件更改(html契沫、js带猴、css、sass懈万、less等)并自動(dòng)刷新頁(yè)面拴清。無(wú)論您是前端還是后端工程師,使用它將提高您30%的工作效率会通。
使用教程
- 安裝BrowserSync
全局安裝(前提安裝Node.js)
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
2.啟動(dòng)BrowserSync
使用技巧
靜態(tài)網(wǎng)站
利用browserSync開(kāi)啟一個(gè)小型的服務(wù)器,并提供一個(gè)url來(lái)查看你的網(wǎng)站涕侈。
//--files 路徑是相對(duì)于運(yùn)行該命令的項(xiàng)目(目錄)
browser-sync start --server --files "css/*.css"
// --files 路徑是相對(duì)于運(yùn)行該命令的項(xiàng)目(目錄)
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件層級(jí)比較深沪停,您可以考慮使用 **(表示任意目錄)匹配,任意目錄下任意.css 或 .html文件驾凶。
browser-sync start --server --files "**/*.css, **/*.html"
動(dòng)態(tài)網(wǎng)站
如果您已經(jīng)有其他本地服務(wù)器環(huán)境PHP或類似的牙甫,您需要使用代理模式。 BrowserSync將通過(guò)代理來(lái)查看您的網(wǎng)站调违。
//主機(jī)名可以是ip或者域名
browser-sync start --proxy "主機(jī)名" "css/*.css"
//例如綁定Browsersync.cn來(lái)訪問(wèn)本地服務(wù)器
browser-sync start --proxy "Browsersync.cn" "css/*.css"