Browsersync能讓瀏覽器實(shí)時(shí)砸西、快速響應(yīng)你的文件更改（html叶眉、js、css芹枷、sass衅疙、less等）并自動(dòng)刷新頁面。更重要的是 Browsersync可以同時(shí)在PC鸳慈、平板饱溢、手機(jī)等設(shè)備下進(jìn)項(xiàng)調(diào)試。你的任何一次代碼保存走芋，以上的設(shè)備都會(huì)同時(shí)顯示你的改動(dòng)”绩郎。
Browsersync可以單獨(dú)使用，也可以集成到gulp和grunt這樣的構(gòu)建工具中使用翁逞，在node.js項(xiàng)目中還能結(jié)合gulp-nodemon實(shí)現(xiàn)全棧的自動(dòng)刷新肋杖，而在移動(dòng)端設(shè)備上同步調(diào)試的功能對(duì)移動(dòng)web開發(fā)顯然是很有幫助的。
單獨(dú)使用Browsersync
- Browsersync是基于node.js的挖函，所以要先安裝node.js状植。
- 全局安裝Browsersync， npm install -g browser-sync怨喘。
- 在你項(xiàng)目的根目錄下打開命令行津畸，執(zhí)行
browser-sync start --server --files "css/*.css"
這個(gè)命令會(huì)啟動(dòng) BrowserSync并監(jiān)聽特定文件，Browsersync將創(chuàng)建并啟動(dòng)一個(gè)本地服務(wù)器必怜，然后會(huì)自動(dòng)打開你的默認(rèn)瀏覽器后訪問http://localhost:3000地址肉拓。在命令行窗口中，我們可以看到
- 上面的External項(xiàng)后面的地址可以用來在手機(jī)瀏覽器上訪問頁面梳庆，這樣就能和電腦桌面瀏覽器同步調(diào)試了暖途。而UI項(xiàng)后面的地址則可以用來訪問Browsersync的配置頁面卑惜，里面可以設(shè)置一些各個(gè)設(shè)備和瀏覽器中事件同步的選項(xiàng)，比如設(shè)置頁面滾動(dòng)丧肴，點(diǎn)擊残揉，表單等事件是否同步等。
- 上述情況是用于本地沒有搭建服務(wù)器的情況芋浮，如果本地搭建了服務(wù)器抱环，比如設(shè)置了vhost local.openadmin.com 指向 C:\wamp\www\openadmin\目錄，那么需要在控制臺(tái)敲入下面的命令：
browser-sync start --proxy local.openadmin.com --files "style/**"
即可啟動(dòng)服務(wù) - 在調(diào)試之前纸巷，我們需要確保測試用的手機(jī)和本地開發(fā)的機(jī)器同處在一個(gè)局域網(wǎng)中镇草。
結(jié)合gulp使用Browsersync
- 在項(xiàng)目根目錄下打開命令行窗口，執(zhí)行npm init瘤旨，生成package.json文件
- 作為項(xiàng)目的開發(fā)依賴安裝gulp和Browsersync：
npm install --save-dev gulp npm install --save-dev browser-sync
然后package.json中就會(huì)出現(xiàn)：
"devDependencies": {
"browser-sync": "^2.18.1",
"gulp": "^3.9.1"
}
- 在項(xiàng)目根目錄下新建gulpfile.js,然后在gulpfile.js中定義一個(gè)任務(wù)梯啤，啟動(dòng)Browsersync：
var gulp = require('gulp');
// 調(diào)用 .create() 意味著你得到一個(gè)唯一的實(shí)例并允許您創(chuàng)建多個(gè)服務(wù)器或代理。
var browserSync = require('browser-sync').create();
// 定義一個(gè)任務(wù)存哲，任務(wù)的名字因宇，該任務(wù)所要執(zhí)行的一些操作
gulp.task('watch', function() {
// 啟動(dòng)Browsersync服務(wù)。這將啟動(dòng)一個(gè)服務(wù)器察滑，代理服務(wù)器（proxy）或靜態(tài)服務(wù)器（server）
browserSync.init({
// 設(shè)置監(jiān)聽的文件，以gulpfile.js所在的根目錄為起點(diǎn)修肠，如果不在根目錄要加上路徑贺辰，單個(gè)文件就用字符串，多個(gè)文件就用數(shù)組
files: ["*.html", "css/*.css", "js/*.js"],
// 啟動(dòng)靜態(tài)服務(wù)器嵌施，默認(rèn)監(jiān)聽3000端口饲化，設(shè)置啟動(dòng)時(shí)打開的index.html的路徑
server: {
baseDir: "./"
},
// 在不同瀏覽器上鏡像點(diǎn)擊、滾動(dòng)和表單吗伤，即所有瀏覽器都會(huì)同步
ghostMode: {
clicks: true,
scroll: true
},
// 更改控制臺(tái)日志前綴
logPrefix: "learning browser-sync in gulp",
// 設(shè)置監(jiān)聽時(shí)打開的瀏覽器吃靠，下面的設(shè)置會(huì)同時(shí)打開chrome, firefox和IE
browser: ["chrome", "firefox", "iexplore"],
// 設(shè)置服務(wù)器監(jiān)聽的端口號(hào)
port: 8080
});
});
從上面的示例代碼中可以看到，在gulpfile.js里可以很方便地配置監(jiān)聽的文件足淆，瀏覽器同步選項(xiàng)撩笆，監(jiān)聽端口等設(shè)置。相關(guān)配置項(xiàng)在Browsersync的官方文檔里有更詳細(xì)的介紹缸浦。
- 最后在命令行中執(zhí)行g(shù)ulp watch，執(zhí)行watch任務(wù)氮兵，就可以啟動(dòng)Browsersync了裂逐。這次因?yàn)樵O(shè)置了要打開的瀏覽器為chrome、firefox還有IE泣栈，會(huì)同時(shí)打開三個(gè)瀏覽器卜高。
Browsersync結(jié)合nodemon實(shí)現(xiàn)node.js項(xiàng)目的全棧刷新
之前一直在自己做一個(gè)基于express框架的項(xiàng)目弥姻，用到了supervisor這個(gè)調(diào)試工具，每次服務(wù)器端js代碼有修改掺涛，都會(huì)自動(dòng)重啟node.js庭敦，但是瀏覽器并不會(huì)自動(dòng)刷新，我又想到了Browsersync薪缆。
要把Browsersync引進(jìn)來需要用到一個(gè)和supervisor類似的工具：nodemon秧廉。
相比 supervisor ，nodemon 的優(yōu)點(diǎn)包括：更輕量級(jí)拣帽，內(nèi)存占用更小疼电。使用更加方便，更容易進(jìn)行擴(kuò)展等减拭。
在gulp里可以用gulp-nodemon這個(gè)插件來實(shí)現(xiàn)nodemon的功能蔽豺，那么我實(shí)現(xiàn)全棧刷新的工作就可以分為兩步：
- 用gulp-nodemon啟動(dòng)node.js項(xiàng)目服務(wù)器
- 在node.js項(xiàng)目啟動(dòng)后啟動(dòng)Browsersync，并監(jiān)聽相關(guān)文件的變化
可以通過gulp-nodemon的start事件來觸發(fā)Browsersync的啟動(dòng)拧粪，以基于express框架的項(xiàng)目為例修陡，具體的gulpfile.js如下
var gulp = require('gulp');
// 調(diào)用 .create() 意味著你得到一個(gè)唯一的實(shí)例并允許您創(chuàng)建多個(gè)服務(wù)器或代理。
var browserSync = require('browser-sync').create();
// 這里reload不加括號(hào)可霎，只引用不調(diào)用
// var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
gulp.task('server', function() {
nodemon({
script: 'app.js',
// 忽略部分對(duì)程序運(yùn)行無影響的文件的改動(dòng)魄鸦，nodemon只監(jiān)視js文件，可用ext項(xiàng)來擴(kuò)展別的文件類型
ignore: ["gulpfile.js", "node_modules/", "public/**/*.*"],
env: {
'NODE_ENV': 'development'
}
}).on('start', function() {
browserSync.init({
proxy: 'http://localhost:3000',
files: ["public/**/*.*", "views/**", "routes/**"],
port:8080
}, function() {
console.log("browser refreshed.");
});
});
});
- 這里Browsersync會(huì)用http://localhost:8080來代理nodemon啟動(dòng)的主機(jī)地址啥纸，這樣号杏，無論是views目錄下的視圖模板文件，還是public目錄下的前端css和js文件斯棒，亦或是routes目錄下的路由控制js文件盾致，只要有改動(dòng)，Browsersync都能監(jiān)聽到荣暮。
- 需要注意的是庭惜，如果是修改了服務(wù)端的js文件，會(huì)先通過nodemon重啟應(yīng)用穗酥，這時(shí)瀏覽器不會(huì)刷新护赊，要再保存一下修改的文件，Browsersync才會(huì)顯示出修改后的效果砾跃。
總結(jié)
現(xiàn)在骏啰，前端的自動(dòng)化和工程化是發(fā)展趨勢，隨著項(xiàng)目的擴(kuò)大抽高，自動(dòng)化能極大提高開發(fā)體驗(yàn)判耕，Browsersync正是這樣一款提升前端開發(fā)效率的利器，即使是初學(xué)者也應(yīng)該盡快掌握Browsersync的使用翘骂，并應(yīng)用到自己的項(xiàng)目開發(fā)中壁熄，幫自己節(jié)約時(shí)間和精力帚豪，以更好更快地完成項(xiàng)目。
參考資料
轉(zhuǎn)載自：
- 作者： 種子_fe
鏈接：http://www.imooc.com/article/14759 - 作者：卡布其諾貓
鏈接：http://www.cnblogs.com/kbqncf/p/4206244.html - 動(dòng)態(tài)項(xiàng)目使用browsersync
鏈接：http://blog.csdn.net/uikoo9/article/details/72368089?utm_source=itdadao&utm_medium=referral
