Browsersync能讓瀏覽器實時、快速響應你的文件更改（html、js、css、sass、less等）并自動刷新頁面。更重要的是 Browsersync可以同時在PC、平板、手機等設備下進項調試。你的任何一次代碼保存，以上的設備都會同時顯示你的改動”。
Browsersync可以單獨使用，也可以集成到gulp和grunt這樣的構建工具中使用，在node.js項目中還能結合gulp-nodemon實現(xiàn)全棧的自動刷新，而在移動端設備上同步調試的功能對移動web開發(fā)顯然是很有幫助的。
單獨使用Browsersync
- Browsersync是基于node.js的，所以要先安裝node.js。
- 全局安裝Browsersync， npm install -g browser-sync。
- 在你項目的根目錄下打開命令行，執(zhí)行
browser-sync start --server --files "css/*.css"
這個命令會啟動 BrowserSync并監(jiān)聽特定文件，Browsersync將創(chuàng)建并啟動一個本地服務器，然后會自動打開你的默認瀏覽器后訪問http://localhost:3000地址。在命令行窗口中，我們可以看到
- 上面的External項后面的地址可以用來在手機瀏覽器上訪問頁面，這樣就能和電腦桌面瀏覽器同步調試了。而UI項后面的地址則可以用來訪問Browsersync的配置頁面，里面可以設置一些各個設備和瀏覽器中事件同步的選項，比如設置頁面滾動，點擊，表單等事件是否同步等。
- 上述情況是用于本地沒有搭建服務器的情況，如果本地搭建了服務器，比如設置了vhost local.openadmin.com 指向 C:\wamp\www\openadmin\目錄，那么需要在控制臺敲入下面的命令：
browser-sync start --proxy local.openadmin.com --files "style/**"
即可啟動服務 - 在調試之前，我們需要確保測試用的手機和本地開發(fā)的機器同處在一個局域網中。
結合gulp使用Browsersync
- 在項目根目錄下打開命令行窗口，執(zhí)行npm init，生成package.json文件
- 作為項目的開發(fā)依賴安裝gulp和Browsersync：
npm install --save-dev gulp npm install --save-dev browser-sync
然后package.json中就會出現(xiàn)：
"devDependencies": {
"browser-sync": "^2.18.1",
"gulp": "^3.9.1"
}
- 在項目根目錄下新建gulpfile.js,然后在gulpfile.js中定義一個任務，啟動Browsersync：
var gulp = require('gulp');
// 調用 .create() 意味著你得到一個唯一的實例并允許您創(chuàng)建多個服務器或代理。
var browserSync = require('browser-sync').create();
// 定義一個任務，任務的名字，該任務所要執(zhí)行的一些操作
gulp.task('watch', function() {
// 啟動Browsersync服務。這將啟動一個服務器，代理服務器（proxy）或靜態(tài)服務器（server）
browserSync.init({
// 設置監(jiān)聽的文件，以gulpfile.js所在的根目錄為起點，如果不在根目錄要加上路徑，單個文件就用字符串，多個文件就用數(shù)組
files: ["*.html", "css/*.css", "js/*.js"],
// 啟動靜態(tài)服務器，默認監(jiān)聽3000端口，設置啟動時打開的index.html的路徑
server: {
baseDir: "./"
},
// 在不同瀏覽器上鏡像點擊、滾動和表單，即所有瀏覽器都會同步
ghostMode: {
clicks: true,
scroll: true
},
// 更改控制臺日志前綴
logPrefix: "learning browser-sync in gulp",
// 設置監(jiān)聽時打開的瀏覽器，下面的設置會同時打開chrome, firefox和IE
browser: ["chrome", "firefox", "iexplore"],
// 設置服務器監(jiān)聽的端口號
port: 8080
});
});
從上面的示例代碼中可以看到，在gulpfile.js里可以很方便地配置監(jiān)聽的文件，瀏覽器同步選項，監(jiān)聽端口等設置。相關配置項在Browsersync的官方文檔里有更詳細的介紹。
- 最后在命令行中執(zhí)行gulp watch，執(zhí)行watch任務，就可以啟動Browsersync了。這次因為設置了要打開的瀏覽器為chrome、firefox還有IE，會同時打開三個瀏覽器。
Browsersync結合nodemon實現(xiàn)node.js項目的全棧刷新
之前一直在自己做一個基于express框架的項目，用到了supervisor這個調試工具，每次服務器端js代碼有修改，都會自動重啟node.js，但是瀏覽器并不會自動刷新，我又想到了Browsersync。
要把Browsersync引進來需要用到一個和supervisor類似的工具：nodemon。
相比 supervisor ，nodemon 的優(yōu)點包括：更輕量級，內存占用更小。使用更加方便，更容易進行擴展等。
在gulp里可以用gulp-nodemon這個插件來實現(xiàn)nodemon的功能，那么我實現(xiàn)全棧刷新的工作就可以分為兩步：
- 用gulp-nodemon啟動node.js項目服務器
- 在node.js項目啟動后啟動Browsersync，并監(jiān)聽相關文件的變化
可以通過gulp-nodemon的start事件來觸發(fā)Browsersync的啟動，以基于express框架的項目為例，具體的gulpfile.js如下
var gulp = require('gulp');
// 調用 .create() 意味著你得到一個唯一的實例并允許您創(chuàng)建多個服務器或代理。
var browserSync = require('browser-sync').create();
// 這里reload不加括號，只引用不調用
// var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
gulp.task('server', function() {
nodemon({
script: 'app.js',
// 忽略部分對程序運行無影響的文件的改動，nodemon只監(jiān)視js文件，可用ext項來擴展別的文件類型
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會用http://localhost:8080來代理nodemon啟動的主機地址，這樣，無論是views目錄下的視圖模板文件，還是public目錄下的前端css和js文件，亦或是routes目錄下的路由控制js文件，只要有改動，Browsersync都能監(jiān)聽到。
- 需要注意的是，如果是修改了服務端的js文件，會先通過nodemon重啟應用，這時瀏覽器不會刷新，要再保存一下修改的文件，Browsersync才會顯示出修改后的效果。
總結
現(xiàn)在，前端的自動化和工程化是發(fā)展趨勢，隨著項目的擴大，自動化能極大提高開發(fā)體驗，Browsersync正是這樣一款提升前端開發(fā)效率的利器，即使是初學者也應該盡快掌握Browsersync的使用，并應用到自己的項目開發(fā)中，幫自己節(jié)約時間和精力，以更好更快地完成項目。
參考資料
轉載自：
- 作者： 種子_fe
鏈接：http://www.imooc.com/article/14759 - 作者：卡布其諾貓
鏈接：http://www.cnblogs.com/kbqncf/p/4206244.html - 動態(tài)項目使用browsersync
鏈接：http://blog.csdn.net/uikoo9/article/details/72368089?utm_source=itdadao&utm_medium=referral
