Browsersync瀏覽器同步測試工具
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就會(huì)啟動(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)站(后臺(tái))
如果是動(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)聽命令。
瀏覽器同步測試工具相關(guān)文章: