瀏覽器同步測試神器 — BrowserSync

Browsersync 能讓瀏覽器實時、快速響應文件更改（html、js、css、sass、less等）並自動刷新頁面。更重要的是 Browsersync能夠同時在PC、平板、手機等設備下進項調試，當使用browsersync後，任何一次代碼保存，以上的設備都會同時響應文件的改動。效果以下：

（圖片來自：http://www.browsersync.cn/ ）

 

如何使用？

一、安裝Node.js

BrowserSync是基於Node.js的, 是一個Node模塊，Node.js能夠從官網下載，當前最新版本6.2.0，穩定版本4.4.4，建議下載最新版，下載後直接安裝便可。

下載地址： http://nodejs.cn/

二、安裝 BrowserSync

在終端窗口中運行如下命令（全局安裝以便在全部的項目中都能使用）：

npm install -g browser-sync

若配合gulp或grunt等構建工具使用，則能夠在須要構建的項目裏面安裝：

npm install --save-dev browser-sync

三、啓動 Browser-Sync

靜態網站

假如須要監聽 .css 文件，則在終端輸入以下命令便可（Browser-sync 會啓動一個小型服務器，並提供一個 url 來查看網站）：

// --files 路徑是相對於運行該命令的項目（目錄） 
browser-sync start --server --files "css/*.css"

若須要監聽多個類型的文件，用逗號隔開便可：

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

動態網站

若是要在本地服務器下監聽文件變化，則須要使用代理模式，BrowserSync 將經過代理 URL(localhost:3000) 來查看網站。

// 主機名能夠是ip或域名
browser-sync start --proxy "主機名" "css/*.css"

運行效果以下：

 

和LiveReload比較

LiveReload 須要搭配瀏覽器插件。Chrome和Firefox都有可用插件，但在IE或者手機瀏覽器沒有對應的插件。

BrowserSync 則不須要瀏覽器插件，一句簡單的控制檯命令以後，不管是在手機仍是電腦，不管用多少個瀏覽器，均可以擁有自動刷新的功能。

 

爲何BrowserSync不須要瀏覽器插件？

由於它使用了服務器的形式（直接或代理）來處理項目文件。默認狀況下，訪問它的服務器上的網頁，能夠看到這樣的提示籤：

這說明當前瀏覽的網頁已鏈接到BrowserSync。查看一下源碼，會發現它們都被添加了與BrowserSync有關的一段 <script> 代碼，就像LiveReload瀏覽器插件作的那樣。這些代碼會在瀏覽器和BrowserSync的服務器之間創建web socket鏈接，一旦有監聽的文件發生變化，BrowserSync會通知瀏覽器。

 

單頁應用？

若是發生變化的文件是css，BrowserSync 不會刷新整頁，而是直接從新請求這個css文件，並更新到當前頁中。

若是你正在開發的是一個單頁應用，刷新整頁會回到初始視圖，而你又須要修改後面的某一個視圖時，這一功能尤爲有用。

 

在Gulp中使用 BrowserSync

Gulp是如今流行的自動化工具，但BrowserSync並無Gulp插件版，由於並不須要。BrowserSync有本身獨立的API，將它註冊爲gulp的一個task便可。以下：

var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
    browserSync({
        files: "**",
        server: {
            baseDir: "./"
        }
    });
});
gulp.task('default', ["browser-sync"]);

 這時候運行 gulp 將等同於前文的 browser-sync start --server --files "**"  。

 

參考資料

http://www.browsersync.cn/

http://www.tuicool.com/articles/vUriay