自動(dòng)刷新從BrowserSync開(kāi)始

請(qǐng)想象這樣一個(gè)場(chǎng)面：你開(kāi)著兩個(gè)顯示器，一邊是IDE里的代碼，另一邊是瀏覽器里的你正在開(kāi)發(fā)的應(yīng)用。此時(shí)桌上還放著你的手機(jī)，手機(jī)里也是這個(gè)開(kāi)發(fā)中的應(yīng)用。然后，你新寫了一小段代碼，按下了ctrl+s保存。緊接著，你的手機(jī)和另一個(gè)顯示器里的應(yīng)用，就變成了更新后的效果。你可以馬上檢查效果是否和你預(yù)想的一致，甚至都不需要?jiǎng)右幌率髽?biāo)…

想起來(lái)還不錯(cuò)？嗯，這只是簡(jiǎn)單地省略掉那個(gè)開(kāi)發(fā)過(guò)程中會(huì)按好多遍的F5刷新。

自動(dòng)刷新

“自動(dòng)刷新”并不是新的概念，但對(duì)關(guān)注“可見(jiàn)”的預(yù)覽效果的前端開(kāi)發(fā)者來(lái)說(shuō)，它非常好用，可以節(jié)約很多時(shí)間。

我也不是現(xiàn)在才知道這個(gè)概念。在這之前，我一直在用LiveReload，它是一個(gè)名字上更明顯地寫著“自動(dòng)刷新”的工具。LiveReload主要搭配瀏覽器插件使用，是很棒的自動(dòng)刷新工具。

不過(guò)，現(xiàn)在我要介紹的是BrowserSync。你會(huì)在接下來(lái)的內(nèi)容里看到，它是一個(gè)更新、更方便的開(kāi)發(fā)工具。

BrowserSync

LiveReload有所不足的地方是，需要搭配瀏覽器插件。但是，插件是取決于瀏覽器的，Chrome和Firefox都有可用插件，但I(xiàn)E，或者我手機(jī)上的瀏覽器，就不能這樣了。這時(shí)候只能手工向頁(yè)面里添加一段script>代碼（其實(shí)插件也是做了這件事），而且還要記得結(jié)束后再手工移除。

BrowserSync的一般用法則不需要瀏覽器插件，也不用手工添加代碼（盡管也提供那樣的用法）。一句控制臺(tái)的命令之后，無(wú)論是在手機(jī)里還是電腦，無(wú)論用多少個(gè)瀏覽器（經(jīng)測(cè)試，IE8+及其它），都可以擁有自動(dòng)刷新的功能。

BrowserSync是怎么做到的？請(qǐng)看它的安裝及使用。

安裝及使用

安裝Node后，通過(guò)npm安裝BrowserSync：

npm install -g browser-sync

然后，就可以開(kāi)始使用了。打開(kāi)控制臺(tái)進(jìn)入項(xiàng)目所在的目錄，然后輸入像這樣的命令：

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

這個(gè)命令用于純靜態(tài)站點(diǎn)，也就是僅一些.html文件的情況。后面的--files "css/*.css"，是指監(jiān)聽(tīng)css目錄中的后綴名為.css的文件。請(qǐng)注意這個(gè)命令里的start --server，這其實(shí)是BrowserSync自己?jiǎn)?dòng)了一個(gè)小型服務(wù)器。

如果是動(dòng)態(tài)站點(diǎn)，則使用代理模式。例如PHP站點(diǎn)，已經(jīng)建立了一個(gè)本地服務(wù)器如http://localhost:8080，此時(shí)會(huì)是這樣的命令：

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

BrowserSync會(huì)提供一個(gè)新地址（如未被占用的話，http://localhost:3000）用于訪問(wèn)。

好了，為什么BrowserSync不需要瀏覽器插件？因?yàn)樗褂昧朔?wù)器的形式（直接或代理）來(lái)處理項(xiàng)目文件。默認(rèn)情況下，訪問(wèn)它的服務(wù)器上的網(wǎng)頁(yè)，可以看到這樣的提示簽：

hint tag: Connected to BrowserSync

這說(shuō)明當(dāng)前瀏覽的網(wǎng)頁(yè)已連接到BrowserSync。查看一下源碼，會(huì)發(fā)現(xiàn)它們都被添加了與BrowserSync有關(guān)的一段script>代碼，就像LiveReload瀏覽器插件做的那樣。這些代碼會(huì)在瀏覽器和BrowserSync的服務(wù)器之間建立web socket連接，一旦有監(jiān)聽(tīng)的文件發(fā)生變化，BrowserSync會(huì)通知瀏覽器。

如果發(fā)生變化的文件是css，BrowserSync不會(huì)刷新整頁(yè)，而是直接重新請(qǐng)求這個(gè)css文件，并更新到當(dāng)前頁(yè)中，效果像這樣：

顯然，這感覺(jué)更加快捷。如果你正在開(kāi)發(fā)的是一個(gè)單頁(yè)應(yīng)用（SPA），刷新整頁(yè)會(huì)回到初始視圖，而你又需要修改后面的某一個(gè)視圖時(shí)，這一功能尤其有用。

文件匹配

從BrowserSync的命令來(lái)看，很重要的一點(diǎn)就是通過(guò)--files指定需要監(jiān)聽(tīng)的文件。有關(guān)這里的文件匹配模式（稱為glob）的詳情，請(qǐng)參考isaacs's minimatch。

經(jīng)過(guò)我自己的嘗試，如果簡(jiǎn)單只是想要監(jiān)聽(tīng)整個(gè)項(xiàng)目，可以寫成這樣：

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

此時(shí)，BrowserSync仍然會(huì)正確地判斷文件變化是否是css。

加入到Gulp使用

Gulp是現(xiàn)在流行的自動(dòng)化工具，但BrowserSync并沒(méi)有Gulp插件版，因?yàn)椴⒉恍枰?。BrowserSync有自己獨(dú)立的API，將它注冊(cè)為gulp的一個(gè)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"]);

這時(shí)候運(yùn)行g(shù)ulp將等同于前文的browser-sync start --server --files "**"。更多的用法示例請(qǐng)查看gulp-browser-sync。

完整選項(xiàng)

到此為止，介紹的都是BrowserSync的基本用法。在控制臺(tái)里嘗試只輸入：

browser-sync

你會(huì)看到BrowserSync完整的控制臺(tái)命令指南。其中可以看到有這個(gè)命令：

browser-sync init

運(yùn)行它，將在當(dāng)前目錄生成一個(gè)配置文件bs-config.js。

參照官方文檔修改這個(gè)文件，然后運(yùn)行

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

就將以bs-config.js的完整配置信息運(yùn)行BrowserSync。

不只是自動(dòng)刷新

BrowserSync并不只是一個(gè)自動(dòng)刷新工具，它還有許多其他功能。默認(rèn)配置下，BrowserSync會(huì)在多個(gè)瀏覽器中同步滾動(dòng)條位置，表單行為和點(diǎn)擊事件。例如，表單行為的情形像這樣：

我覺(jué)得這是很酷的功能！想象一下桌上擺很多個(gè)不同屏幕尺寸的手機(jī)來(lái)測(cè)試的情景，你操作一個(gè)，就會(huì)帶動(dòng)其他的一起！當(dāng)然，這些功能還可以在不需要的時(shí)候關(guān)閉。

UI界面及其他
下面是一個(gè)BrowserSync的控制臺(tái)輸出示例：

可以看到還有一個(gè)叫做UI的一個(gè)地址，它是BrowserSync提供的一個(gè)簡(jiǎn)易控制面板。BrowserSync最常用的幾個(gè)配置選項(xiàng)，都可以在這個(gè)面板里調(diào)整。

在面板里面你還會(huì)發(fā)現(xiàn)那個(gè)經(jīng)典的遠(yuǎn)程調(diào)試工具weinre也在這：

BrowserSync目前已知的一點(diǎn)問(wèn)題

前文提到，如果發(fā)生變化的文件是css，BrowserSync會(huì)以無(wú)刷新方式來(lái)更新，這是一個(gè)很棒的效果。如果使用scss、less等預(yù)編譯器，將監(jiān)聽(tīng)設(shè)置為編譯后的css文件即可。

但是，Web應(yīng)用框架Rails會(huì)有一些問(wèn)題。在開(kāi)發(fā)環(huán)境中，css是在被請(qǐng)求的時(shí)候編譯（Rails一般使用sass）再返回給瀏覽器的，它只有緩存，而沒(méi)有實(shí)際的.css文件。因此，BrowserSync的文件監(jiān)聽(tīng)將無(wú)法指向它們，而如果指向sass文件，瀏覽器只會(huì)以整頁(yè)刷新的形式來(lái)處理。這個(gè)問(wèn)題可以參見(jiàn)Github上的issue。

一個(gè)可行的解決方法是用其他工具替代Rails的Asset Pipeline。但在這里，我推薦另一個(gè)解決方案：使用LiveReload（LiveReload你還是有點(diǎn)水平的?。?。經(jīng)測(cè)試，LiveReload在Rails中也可以處理好css的快捷更新。關(guān)于LiveReload做到這一點(diǎn)的原理，你可以閱讀Lightning-Fast Sass Reloading in Rails。

也期待BrowserSync可以在未來(lái)解決這個(gè)問(wèn)題。

結(jié)語(yǔ)

想要在開(kāi)發(fā)中更流暢，更快捷？請(qǐng)嘗試BrowserSync！節(jié)約一點(diǎn)時(shí)間，你也許就可以做到更多。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。