摘要：靜態服務器代理你的域名或注入通過流的方式創建任務流程這樣您就可以在您的任務完成后調用，所有的瀏覽器將被告知的變化并實時更新因為只在乎您的在編譯完成后注意后調用重載。

使用Google Chrome DevTools

工作區Browsersync

安裝 Node.js

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

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

npm install --save-dev browser-sync

啟動 BrowserSync

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

// --files 路徑是相對于運行該命令的項目（目錄）

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

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

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

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

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

Browsersync + Gulp.js
當您在使用gulp構建您的項目時，您只需要 require Browsersync 模塊, 利用API 并進行 選項配置。 以下是一些流行項目中常見的用例， 如 谷歌的網絡入門套件 和其他項目。安裝^ 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();

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

// 代理

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

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

// 靜態服務器 + 監聽 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將注入到瀏覽器里實現更新
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 選項, 將會生成.map 文件. 這些文件最終會被送到下游，在 browserSync.reload() 時接收它們, 它會嘗試重新加載頁面 (因為它不會在DOM里發現在任何 .map 文件)。
要解決這個問題, 您可以使用 gulp-filter 包， 以確保只有 *.css 文件響應 .reload - 這樣一來，您還是會得到CSS注入，而不是整個頁面重載。

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

// 靜態服務器 + 監聽 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文件后), 但您希望在任務發生后重載。這將在 gulp 4.x.x 時變得更容易, 但現在您可以做到以下幾點： (確保您 return 從您的工作流 ，以確保 browserSync.reload() 被調用在正確的時間。

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

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

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

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

// 添加 browserSync.reload 到任務隊列里
// 所有的瀏覽器重載后任務完成。
gulp.watch("js/*.js", ["js-watch"]);
});手動重載^ TOP
如果流支持并不滿足您的需求，您可以通過創建一個任務來手動觸發重載方法。我們創建了一個sass任務,在我們修改文件后會在瀏覽器里注入CSS，但是當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}));
});

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

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

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