啄木鳥軟件測試培訓網：www.3testing.comphp
什麼是browsersync？css
browsersync能夠實時監控代碼文件的修改（html、css、js、less等等），文件被保存發生變化的時候browsersync能夠自動刷新頁面，免去手動F5的麻煩步驟。更重要的是，browsersync利用nodejs的特性建立一個臨時的可訪問的服務器，方便在局域網內使用手機，平板電腦等其餘移動設備進行實時的調試。html
sync-demo.gif前端
scroll-demo.gifnode
如何安裝browsersync？python
1.安裝nodejslinux
https://nodejs.org 登陸nodejs官方網站下載最新的nodejs，不管是mac os windows或者linux nodejs都有很好的安裝方式。npm
2.安裝browsersyncjson
打開命令提示符或者terminal輸入windows
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的監聽命令。
顧翔凡言：
想作軟件測試，最好先去作兩到五年開發
啄木鳥軟件測試培訓中心，主打五門課：
初級：
1，你也想成爲軟件測試工程師嗎～軟件測試基礎教程
中級：
2，軟件測試工程師必須掌握的技能～軟件測試設計方法實戰。
高級：
3，讓你的程序跑得更快～軟件性能測試
4，讓你找出更多的bug～探索式軟件測試
5，讓用戶迷上你的產品～用戶體驗式測試
本文分享自微信公衆號 - 軟件測試培訓（iTestTrain）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。