browser-sync自動刷新，釋放你的F5
來自： http://caibaojian.com/browser-sync.html
這是一個神器，相比LiveRoad使用比較簡單，建議做 前端開發 的同學，不要猶豫和觀察，趕緊裝上釋放你的F5吧。以下來自己browser-sync中文網的介紹和使用方法。
省時的瀏覽器同步測試工具
Browsersync能讓瀏覽器實時、快速響應您的文件更改（ html 、 JS 、css、sass、less等）并自動刷新頁面。更重要的是 Browsersync可以同時在PC、平板、手機等設備下進項調試。您可以想象一下：“假設您的桌子上有pc、ipad、 iphone 、 Android 等設備，同時打開了您需要調試的頁面，當您使用browsersync后，您的任何一次 代碼 保存，以上的設備都會同時顯示您的改動”。無論您是前端還是后端工程師，使用它將提高您30%的工作效率。
有了它，您不用在多個瀏覽器、多個設備間來回切換，頻繁的刷新頁面。更神奇的是您在一個瀏覽器中滾動頁面、點擊等行為也會同步到其他瀏覽器和設備中，這一切還可以通過可視化界面來控制。
簡化操作流程
每個網頁在不同設備的瀏覽器里，測試時間呈指數級增長，無論是PC還是移動端。曾經我們每改一次的代碼，都需要手動去刷新一次頁面，查看我們的改動是否正確；現在，BrowserSync減少了重復的手工任務，這一切都交給BrowserSync去完成，我們只需專注在業務的邏輯里去。
工作中您需要它
BrowserSync是建立在網絡技術上的，您可以輕松安裝在OS X，Windows或 Linux 上，然后在不同的設備及瀏覽器里進行調試。就連UI都可以運行在瀏覽器 - 嘗試在另一臺設備上創建第二頁面來控制您的BrowserSync。
插入到您的工作流程
通過可視化的操作方式或命令行來創建個性化的測試環境，多設備共同響應。BrowserSync很容易與您的網絡平臺集成，構建工具和其他Node項目中，例如 gulp 、 Grunt 。
文件同步
當您改變HTML， CSS ，圖像和其他項目文件瀏覽器會自動更新。
瀏覽器支持
支持PC，平板電腦和手機之間的即時同步。各種文件及時響應，堪稱完美。
構建工具兼容
可輕松與grunt、gulp等工具配合使用，或包含在其它node項目里。
如何使用
1. 安裝 Node. js
BrowserSync是基于Node.js的, 是一個Node模塊， 如果您想要快速使用它，也許您需要先安裝一下Node.js
2. 安裝 BrowserSync
您可以選擇從Node.js的包管理（NPM） 庫中 安裝BrowserSync。打開一個終端窗口，運行以下命令：
npm install -g browser-sync
您告訴包管理器下載BrowserSync文件，并在全局下安裝它們，您可以在所有項目(任何目錄)中使用。
當然您也可以結合gulpjs或gruntjs構建工具來使用，在您需要構建的項目里運行下面的命令:
npm install --save-dev browser-sync</div>
3. 啟動 BrowserSync
一個基本用途是，如果您只希望在對某個 css 文件進行修改后會同步到瀏覽器里。那么您只需要運行命令行工具，進入到該項目（目錄）下，并運行相應的命令：
靜態網站
如果您想要監聽 .css 文件, 您需要使用 服務器模式 。 BrowserSync 將啟動一個小型服務器，并提供一個URL來查看您的網站。
// --files 路徑是相對于運行該命令的項目（目錄） browser-sync start --server --files "css/*.css"
如果您需要監聽多個類型的文件，您只需要用逗號隔開。例如我們再加入一個 .html 文件
// --files 路徑是相對于運行該命令的項目（目錄） browser-sync start --server --files "css/*.css, *.html" // 如果你的文件層級比較深，您可以考慮使用 **（表示任意目錄）匹配，任意目錄下任意.css 或 .html文件。 browser-sync start --server --files "**/*.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"
結合構建工具
我們建議您結合gulp或grunt來使用，我們這里有詳細說明Gulp文檔、 Grunt 文檔。如果您還沒有使用gulp或grunt，那么可以通過以上方式創建Browsersync
首先，您需要安裝 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"
});
});</pre>
首先，你需要安裝 Browsersync 插件
$ npm install grunt-browser-sync --save-dev
... 然后將此行添加到您的 Gruntfile.js
grunt.loadNpmTasks('grunt-browser-sync');
靜態文件服務器
我們來看一個簡單的CSS例子，使用內置的服務器引用靜態HTML / CSS / JS文件。這個單獨的配置將創建一個小型服務器（使用當前的工作目錄為基準），當你的CSS文件修改后，這些變化將會自動注入到瀏覽器里，實時顯示。
browserSync: {
bsFiles: {
src : 'assets/css/*.css'
},
options: {
server: {
baseDir: "./"
}
}
}
Proxy（代理）
如果你已經有一個本地的服務器設置（虛擬主機等），只需要告訴Browsersync，剩下的工作將由它為你完成。
browserSync: {
dev: {
bsFiles: {
src : 'assets/css/style.css'
},
options: {
proxy: "local.dev"
}
}
} </div>