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

使用Google Chrome DevTools

工作區(qū)Browsersync

安裝 Node.js

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

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

npm install --save-dev browser-sync

啟動 BrowserSync

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

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

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

如果您需要監(jiān)聽多個類型的文件，您只需要用逗號隔開。例如我們再加入一個.html文件

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

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

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

Browsersync + Gulp.js
當(dāng)您在使用gulp構(gòu)建您的項(xiàng)目時，您只需要 require Browsersync 模塊, 利用API 并進(jìn)行 選項(xiàng)配置。 以下是一些流行項(xiàng)目中常見的用例， 如 谷歌的網(wǎng)絡(luò)入門套件 和其他項(xiàng)目。安裝^ TOP
首先，您需要安裝 Browsersync 和 依賴包 Gulp 。如果你是第一次安裝，那么你可以通過--save-dev命令，這將會自動在你的package.json里添加依賴，下一次再安裝時，你只需要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
通過流的方式創(chuàng)建任務(wù)流程, 這樣您就可以在您的任務(wù)完成后調(diào)用reload，所有的瀏覽器將被告知的變化并實(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)聽 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), 將會生成.map 文件. 這些文件最終會被送到下游，在 browserSync.reload() 時接收它們, 它會嘗試重新加載頁面 (因?yàn)樗粫贒OM里發(fā)現(xiàn)在任何 .map 文件)。
要解決這個問題, 您可以使用 gulp-filter 包， 以確保只有 *.css 文件響應(yīng) .reload - 這樣一來，您還是會得到CSS注入，而不是整個頁面重載。

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)聽 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
有時候，您可能只是想完全重新加載頁面 (例如，處理一堆JS文件后), 但您希望在任務(wù)發(fā)生后重載。這將在 gulp 4.x.x 時變得更容易, 但現(xiàn)在您可以做到以下幾點(diǎn)： (確保您 return 從您的工作流 ，以確保 browserSync.reload() 被調(diào)用在正確的時間。

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

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

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

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

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

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

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

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

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

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