Browsersync瀏覽器同步測試工具

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

　　Browsersync瀏覽器同步測試工具

　　什么是browsersync?

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

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

　　如何使用browsersync?

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

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

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

　　browsersync就會啟動并且打開默認的瀏覽器，顯示項目首頁。

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

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

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

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

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

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

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

　　配合npm開發(fā)使用

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

　　具體方法

　　1.進入到項目根目錄

　　npm init

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

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

　　Paste_Image.png

　　在scripts里面填寫

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

　　保存。

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

　　輸入

　　npm run dev

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