摘要：靜態(tài)服務(wù)器代理你的域名或注入通過(guò)流的方式創(chuàng)建任務(wù)流程這樣您就可以在您的任務(wù)完成后調(diào)用，所有的瀏覽器將被告知的變化并實(shí)時(shí)更新因?yàn)橹辉诤跄脑诰幾g完成后注意后調(diào)用重載。

使用Google Chrome DevTools

工作區(qū)Browsersync

安裝 Node.js

BrowserSync是基于Node.js的, 是一個(gè)Node模塊， 如果您想要快速使用它，也許您需要先安裝一下Node.js 安裝適用于Mac OS，Windows和Linux。

安裝 BrowserSync您可以選擇從Node.js的包管理（NPM）庫(kù)中 安裝BrowserSync。打開(kāi)一個(gè)終端窗口，運(yùn)行以下命令：npm install -g browser-sync您告訴包管理器下載BrowserSync文件，并在全局下安裝它們，您可以在所有項(xiàng)目(任何目錄)中使用。當(dāng)然您也可以結(jié)合gulpjs或gruntjs構(gòu)建工具來(lái)使用，在您需要構(gòu)建的項(xiàng)目里運(yùn)行下面的命令:

npm install --save-dev browser-sync

啟動(dòng) BrowserSync

一個(gè)基本用途是，如果您只希望在對(duì)某個(gè)css文件進(jìn)行修改后會(huì)同步到瀏覽器里。那么您只需要運(yùn)行命令行工具，進(jìn)入到該項(xiàng)目（目錄）下，并運(yùn)行相應(yīng)的命令：靜態(tài)網(wǎng)站
如果您想要監(jiān)聽(tīng).css文件, 您需要使用服務(wù)器模式。 BrowserSync 將啟動(dòng)一個(gè)小型服務(wù)器，并提供一個(gè)URL來(lái)查看您的網(wǎng)站。

// --files 路徑是相對(duì)于運(yùn)行該命令的項(xiàng)目（目錄）

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

如果您需要監(jiān)聽(tīng)多個(gè)類(lèi)型的文件，您只需要用逗號(hào)隔開(kāi)。例如我們?cè)偌尤胍粋€(gè).html文件

// --files 路徑是相對(duì)于運(yùn)行該命令的項(xiàng)目（目錄）
browser-sync start --server --files "css/.css, .html"http:// 如果你的文件層級(jí)比較深，您可以考慮使用 **（表示任意目錄）匹配，任意目錄下任意.css 或 .html文件。
browser-sync start --server --files "/.css, /.html"

// 監(jiān)聽(tīng)css文件
browser-sync start --server --files "css/*.css"http:// 監(jiān)聽(tīng)css和html文件
browser-sync start --server --files "css/.css, .html"動(dòng)態(tài)網(wǎng)站
如果您已經(jīng)有其他本地服務(wù)器環(huán)境PHP或類(lèi)似的，您需要使用代理模式。 BrowserSync將通過(guò)代理URL(localhost:3000)來(lái)查看您的網(wǎng)站。

// 主機(jī)名可以是ip或域名
browser-sync start --proxy "主機(jī)名" "css/*.css"
在本地創(chuàng)建了一個(gè)PHP服務(wù)器環(huán)境，并通過(guò)綁定Browsersync.cn來(lái)訪(fǎng)問(wèn)本地服務(wù)器，使用以下命令方式，Browsersync將提供一個(gè)新的地址localhost:3000來(lái)訪(fǎng)問(wèn)Browsersync.cn，并監(jiān)聽(tīng)其css目錄下的所有css文件。
browser-sync start --proxy "Browsersync.cn" "css/*.css"

Browsersync + Gulp.js
當(dāng)您在使用gulp構(gòu)建您的項(xiàng)目時(shí)，您只需要 require Browsersync 模塊, 利用API 并進(jìn)行 選項(xiàng)配置。 以下是一些流行項(xiàng)目中常見(jiàn)的用例， 如 谷歌的網(wǎng)絡(luò)入門(mén)套件 和其他項(xiàng)目。安裝^ TOP
首先，您需要安裝 Browsersync 和 依賴(lài)包 Gulp 。如果你是第一次安裝，那么你可以通過(guò)--save-dev命令，這將會(huì)自動(dòng)在你的package.json里添加依賴(lài)，下一次再安裝時(shí)，你只需要npm install
$ npm install browser-sync gulp --save-dev
然后，在您的 gulpfile.js 文件里使用它們。

var gulp = require("gulp");
var browserSync = require("browser-sync").create();

// 靜態(tài)服務(wù)器
gulp.task("browser-sync", function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});

// 代理

gulp.task("browser-sync", function() {
browserSync.init({
proxy: "你的域名或IP"
});
});SASS + CSS 注入^ TOP
通過(guò)流的方式創(chuàng)建任務(wù)流程, 這樣您就可以在您的任務(wù)完成后調(diào)用reload，所有的瀏覽器將被告知的變化并實(shí)時(shí)更新. 因?yàn)锽rowsersync只在乎您的CSS在編譯完成 finished 后 - 注意： gulp.dest 后調(diào)用重載。

var gulp = require("gulp");
var browserSync = require("browser-sync").create();
var sass = require("gulp-sass");
var reload = browserSync.reload;

// 靜態(tài)服務(wù)器 + 監(jiān)聽(tīng) scss/html 文件
gulp.task("serve", ["sass"], function() {

browserSync.init({
server: "./app"
});

gulp.watch("app/scss/*.scss", ["sass"]);
gulp.watch("app/*.html").on("change", reload);
});

// scss編譯后的css將注入到瀏覽器里實(shí)現(xiàn)更新
gulp.task("sass", function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(reload({stream: true}));
});

gulp.task("default", ["serve"]);SASS & Source Maps^ TOP
如果您使用 gulp-ruby-sass 與 sourcemap: true 選項(xiàng), 將會(huì)生成.map 文件. 這些文件最終會(huì)被送到下游，在 browserSync.reload() 時(shí)接收它們, 它會(huì)嘗試重新加載頁(yè)面 (因?yàn)樗粫?huì)在DOM里發(fā)現(xiàn)在任何 .map 文件)。
要解決這個(gè)問(wèn)題, 您可以使用 gulp-filter 包， 以確保只有 *.css 文件響應(yīng) .reload - 這樣一來(lái)，您還是會(huì)得到CSS注入，而不是整個(gè)頁(yè)面重載。

var gulp = require("gulp");
var sass = require("gulp-ruby-sass");
var filter = require("gulp-filter");
var browserSync = require("browser-sync").create();

// 靜態(tài)服務(wù)器 + 監(jiān)聽(tīng) scss/html 文件
gulp.task("serve", ["sass"], function() {

browserSync.init({
server: "./app"
});

gulp.watch("app/scss/*.scss", ["sass"]);
gulp.watch("app/*.html").on("change", reload);
});

gulp.task("sass", function () {
return gulp.src("scss/*/.scss")
.pipe(sass({sourcemap: true}))
.pipe(gulp.dest("css"))// Write the CSS & Source maps
.pipe(filter("*/.css")) // Filtering stream to only css files
.pipe(browserSync.reload({stream:true}));
});瀏覽器重載^ TOP
有時(shí)候，您可能只是想完全重新加載頁(yè)面 (例如，處理一堆JS文件后), 但您希望在任務(wù)發(fā)生后重載。這將在 gulp 4.x.x 時(shí)變得更容易, 但現(xiàn)在您可以做到以下幾點(diǎn)： (確保您 return 從您的工作流 ，以確保 browserSync.reload() 被調(diào)用在正確的時(shí)間。

// 處理完JS文件后返回流
gulp.task("js", function () {
return gulp.src("js/*js")
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest("dist/js"));
});

// 創(chuàng)建一個(gè)任務(wù)確保JS任務(wù)完成之前能夠繼續(xù)響應(yīng)// 瀏覽器重載
gulp.task("js-watch", ["js"], browserSync.reload);

// 使用默認(rèn)任務(wù)啟動(dòng)Browsersync，監(jiān)聽(tīng)JS文件
gulp.task("serve", ["js"], function () {

// 從這個(gè)項(xiàng)目的根目錄啟動(dòng)服務(wù)器
browserSync({
server: {
baseDir: "./"
}
});

// 添加 browserSync.reload 到任務(wù)隊(duì)列里
// 所有的瀏覽器重載后任務(wù)完成。
gulp.watch("js/*.js", ["js-watch"]);
});手動(dòng)重載^ TOP
如果流支持并不滿(mǎn)足您的需求，您可以通過(guò)創(chuàng)建一個(gè)任務(wù)來(lái)手動(dòng)觸發(fā)重載方法。我們創(chuàng)建了一個(gè)sass任務(wù),在我們修改文件后會(huì)在瀏覽器里注入CSS，但是當(dāng)HTML文件被更改時(shí)，瀏覽器將會(huì)被重新加載（手動(dòng)重載）。

// 使用變量引用 reload 方法var reload = browserSync.reload;

// 編譯 SASS & 自動(dòng)注入到瀏覽器
gulp.task("sass", function () {
return gulp.src("scss/styles.scss")
.pipe(sass({includePaths: ["scss"]}))
.pipe(gulp.dest("css"))
.pipe(reload({stream:true}));
});

// 監(jiān)聽(tīng)scss和html文件, 當(dāng)文件發(fā)生變化后做些什么！
gulp.task("serve", ["sass"], function () {

// 從這個(gè)項(xiàng)目的根目錄啟動(dòng)服務(wù)器
browserSync({
server: {
baseDir: "./"
}
});

gulp.watch("scss/*.scss", ["sass"]);
gulp.watch("*.html").on("change", browserSync.reload);
});