browsersync可以實(shí)時(shí)監(jiān)控代碼文件的修改(html、css、js、less等等)，文件被保存發(fā)生變化的時(shí)候browsersync可以自動(dòng)刷新頁面，免去手動(dòng)F5的麻煩步驟。下面是學(xué)習(xí)啦小編跟大家分享的是Browsersync瀏覽器同步測試工具，歡迎大家來閱讀學(xué)習(xí)。

　　Browsersync瀏覽器同步測試工具

　　什么是browsersync?

　　browsersync可以實(shí)時(shí)監(jiān)控代碼文件的修改(html、css、js、less等等)，文件被保存發(fā)生變化的時(shí)候browsersync可以自動(dòng)刷新頁面，免去手動(dòng)F5的麻煩步驟。更重要的是，browsersync利用nodejs的特性創(chuàng)建一個(gè)臨時(shí)的可訪問的服務(wù)器，方便在局域網(wǎng)內(nèi)使用手機(jī)，平板電腦等其他移動(dòng)設(shè)備進(jìn)行實(shí)時(shí)的調(diào)試。

　　sync-demo.gif

　　scroll-demo.gif

　　如何安裝browsersync?

　　1.安裝nodejs

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

　　2.安裝browsersync

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

　　npm install -g browser-sync

　　進(jìn)行全局安裝，這樣就可以在任何一個(gè)項(xiàng)目上使用該工具。

　　如何使用browsersync?

　　靜態(tài)網(wǎng)站(前端)

　　如果是靜態(tài)網(wǎng)站,在命令提示符的情況下直接cd到靜態(tài)網(wǎng)站的根目錄

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

　　browsersync就會啟動(dòng)并且打開默認(rèn)的瀏覽器，顯示項(xiàng)目首頁。

　　**表示的是監(jiān)聽目錄下所有文件。

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

　　css/.css, .html表示監(jiān)聽css文件夾下所有的css文件，以及根目錄下的所有html文件。

　　動(dòng)態(tài)網(wǎng)站(后臺)

　　如果是動(dòng)態(tài)網(wǎng)站比如php或者python就不能用browsersync自帶的服務(wù)器啟動(dòng)，需要使用代理模式

　　browser-sync start --proxy "主機(jī)名" "css/*.css"

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

　　配合npm開發(fā)使用

　　每次在使用browser-sync的時(shí)候打命令太長了非常不方便，為了方便在項(xiàng)目中使用可以結(jié)合package.json使用。

　　具體方法

　　1.進(jìn)入到項(xiàng)目根目錄

　　npm init

　　創(chuàng)建package.json文件。

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

　　Paste_Image.png

　　在scripts里面填寫

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

　　保存。

　　3.打開命令提示符進(jìn)入到項(xiàng)目根目錄

　　輸入

　　npm run dev

　　就可以啟動(dòng)browsersync的監(jiān)聽命令。