BrowserSync，迅捷從免F5開始

請想象這樣一個場面：你開着兩個顯示器，一邊是IDE裏的代碼，另外一邊是瀏覽器裏的你正在開發的應用。此時桌上還放着你的手機，手機裏也是這個開發中的應用。而後，你新寫了一小段代碼，按下了ctrl+s保存。緊接着，你的手機和另外一個顯示器裏的應用，就變成了更新後的效果。你能夠立刻檢查效果是否和你預想的一致，甚至都不須要動一下鼠標...

想起來還不錯？嗯，這只是簡單地省略掉那個開發過程當中會按好多遍的F5刷新。

自動刷新

「自動刷新」並非新的概念，但對關注「可見」的預覽效果的前端開發者來講，它很是好用，能夠節約不少時間。

我也不是如今才知道這個概念。在這以前，我一直在用[LiveReload][]，它是一個名字上更明顯地寫着「自動刷新」的工具。LiveReload主要搭配瀏覽器插件使用，是很棒的自動刷新工具。

不過，如今我要介紹的是[BrowserSync][]。你會在接下來的內容裏看到，它是一個更新、更方便的開發工具。

BrowserSync

LiveReload有所不足的地方是，須要搭配瀏覽器插件。可是，插件是取決於瀏覽器的，Chrome和Firefox都有可用插件（見[這頁][]），但IE，或者我手機上的瀏覽器，就不能這樣了。這時候只能手工向頁面裏添加一段<script>代碼（其實插件也是作了這件事），並且還要記得結束後再手工移除。

BrowserSync的通常用法則不須要瀏覽器插件，也不用手工添加代碼（儘管也提供那樣的用法）。一句控制檯的命令以後，不管是在手機裏仍是電腦，不管用多少個瀏覽器（經測試，IE8+及其它），均可以擁有自動刷新的功能。

BrowserSync是怎麼作到的？請看它的安裝及使用。

安裝及使用

安裝Node[]安裝BrowserSync：

npm install -g browser-sync

而後，就能夠開始使用了。打開控制檯進入項目所在的目錄，而後輸入像這樣的命令：

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

這個命令用於純靜態站點，也就是僅一些.html文件的狀況。後面的--files "css/*.css"，是指監聽css目錄中的後綴名爲.css的文件。請注意這個命令裏的start --server，這實際上是BrowserSync本身啓動了一個小型服務器。

若是是動態站點，則使用代理模式。例如PHP站點，已經創建了一個本地服務器如http://localhost:8080，此時會是這樣的命令：

browser-sync start --proxy "localhost:8080" --files "css/*.css"

BrowserSync會提供一個新地址（如未被佔用的話，http://localhost:3000）用於訪問。

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

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

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

顯然，這感受更加快捷。若是你正在開發的是一個單頁應用（[SPA][]），刷新整頁會回到初始視圖，而你又須要修改後面的某一個視圖時，這一功能尤爲有用。

文件匹配

從BrowserSync的命令來看，很重要的一點就是經過--files指定須要監聽的文件。有關這裏的文件匹配模式（稱爲glob）的詳情，請參考[isaacs's minimatch][]。

通過我本身的嘗試，若是簡單只是想要監聽整個項目，能夠寫成這樣：

browser-sync start --server  --files "**"

此時，BrowserSync仍然會正確地判斷文件變化是不是css。

加入到Gulp使用

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

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 "**"。更多的用法示例請查看[gulp-browser-sync][]。

完整選項

到此爲止，介紹的都是BrowserSync的基本用法。在控制檯裏嘗試只輸入：

browser-sync

你會看到BrowserSync完整的控制檯命令指南。其中能夠看到有這個命令：

browser-sync init

運行它，將在當前目錄生成一個配置文件bs-config.js。

參照[官方文檔][]修改這個文件，而後運行

browser-sync start --config bs-config .js

就將以bs-config.js的完整配置信息運行BrowserSync。

不僅是自動刷新

BrowserSync並不僅是一個自動刷新工具，它還有許多其餘功能。默認配置下，BrowserSync會在多個瀏覽器中同步滾動條位置，表單行爲和點擊事件。例如，表單行爲的情形像這樣：

我以爲這是很酷的功能！想象一下桌上擺不少個不一樣屏幕尺寸的手機來測試的情景，你操做一個，就會帶動其餘的一塊兒！固然，這些功能還能夠在不須要的時候關閉。

UI界面及其餘

下面是一個BrowserSync的控制檯輸出示例：

能夠看到還有一個叫作UI的一個地址，它是BrowserSync提供的一個簡易控制面板。BrowserSync最經常使用的幾個配置選項，均可以在這個面板裏調整。

在面板裏面你還會發現那個經典的遠程調試工具[weinre][]也在這：

BrowserSync目前已知的一點問題

前文提到，若是發生變化的文件是css，BrowserSync會以無刷新方式來更新，這是一個很棒的效果。若是使用scss、less等預編譯器，將監聽設置爲編譯後的css文件便可。

可是，Web應用框架Rails[]。

一個可行的解決方法是用其餘工具替代Rails的Asset Pipeline。但在這裏，我推薦另外一個解決方案：使用LiveReload（LiveReload你仍是有點水平的！）。經測試，LiveReload在Rails中也能夠處理好css的快捷更新。關於LiveReload作到這一點的原理，你能夠閱讀[Lightning-Fast Sass Reloading in Rails][]。

也期待BrowserSync能夠在將來解決這個問題。

結語

想要在開發中更流暢，更快捷？請嘗試BrowserSync！節約一點時間，你也許就能夠作到更多。

（從新編輯自個人博客，原文地址：http://acgtofe.com/posts/2015/03/more-fluent-with-browsersync）