什么是browsersync？

browsersync可以實時監控代碼文件的修改（html、css、js、less等等），文件被保存發生變化的時候browsersync可以自動刷新頁面，免去手動F5的麻煩步驟。更重要的是，browsersync利用nodejs的特性創建一個臨時的可訪問的服務器，方便在局域網內使用手機，平板電腦等其他移動設備進行實時的調試。

sync-demo.gif

scroll-demo.gif

如何安裝browsersync？

1.安裝nodejs

https://nodejs.org 登錄nodejs官方網站下載最新的nodejs，無論是mac os windows或者linux nodejs都有很好的安裝方式。

2.安裝browsersync

打開命令提示符或者terminal輸入

npm install -g browser-sync

進行全局安裝，這樣就可以在任何一個項目上使用該工具。

如何使用browsersync？

靜態網站（前端）

如果是靜態網站,在命令提示符的情況下直接cd到靜態網站的根目錄

browser-sync start --server --files **

browsersync就會啟動并且打開默認的瀏覽器，顯示項目首頁。
**表示的是監聽目錄下所有文件。

browser-sync start --server --files "css/*.css, *.html"

css/*.css, *.html表示監聽css文件夾下所有的css文件，以及根目錄下的所有html文件。

動態網站（后臺）

如果是動態網站比如php或者python就不能用browsersync自帶的服務器啟動，需要使用代理模式

browser-sync start --proxy "主機名" "css/*.css"

browser-sync start --proxy "jianshu.com" "css/*.css"

配合npm開發使用

每次在使用browser-sync的時候打命令太長了非常不方便，為了方便在項目中使用可以結合package.json使用。

具體方法

1.進入到項目根目錄

npm init

創建package.json文件。
2.打開package.json文件添加配置。

Paste_Image.png

在scripts里面填寫

"dev":"browser-sync start --server --files **"

保存。
3.打開命令提示符進入到項目根目錄
輸入

npm run dev

就可以啟動browsersync的監聽命令。