自動刷新從BrowserSync開始

請想象這樣一個場面：你開著兩個顯示器，一邊是IDE里的代碼，另一邊是瀏覽器里的你正在開發(fā)的應用。此時桌上還放著你的手機，手機里也是這個開發(fā)中的應用。然后，你新寫了一小段代碼，按下了ctrl+s保存。緊接著，你的手機和另一個顯示器里的應用，就變成了更新后的效果。你可以馬上檢查效果是否和你預想的一致，甚至都不需要動一下鼠標…

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

自動刷新

“自動刷新”并不是新的概念，但對關注“可見”的預覽效果的前端開發(fā)者來說，它非常好用，可以節(jié)約很多時間。

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

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

BrowserSync

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

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

BrowserSync是怎么做到的？請看它的安裝及使用。

安裝及使用

安裝Node后，通過npm安裝BrowserSync：

npm install -g browser-sync

然后，就可以開始使用了。打開控制臺進入項目所在的目錄，然后輸入像這樣的命令：

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

這個命令用于純靜態(tài)站點，也就是僅一些.html文件的情況。后面的--files "css/*.css"，是指監(jiān)聽css目錄中的后綴名為.css的文件。請注意這個命令里的start --server，這其實是BrowserSync自己啟動了一個小型服務器。

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

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

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

好了，為什么BrowserSync不需要瀏覽器插件？因為它使用了服務器的形式（直接或代理）來處理項目文件。默認情況下，訪問它的服務器上的網(wǎng)頁，可以看到這樣的提示簽：

hint tag: Connected to BrowserSync

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

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

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

文件匹配

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

經過我自己的嘗試，如果簡單只是想要監(jiān)聽整個項目，可以寫成這樣：

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

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

加入到Gulp使用

Gulp是現(xiàn)在流行的自動化工具，但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最常用的幾個配置選項，都可以在這個面板里調整。

在面板里面你還會發(fā)現(xiàn)那個經典的遠程調試工具weinre也在這：

BrowserSync目前已知的一點問題

前文提到，如果發(fā)生變化的文件是css，BrowserSync會以無刷新方式來更新，這是一個很棒的效果。如果使用scss、less等預編譯器，將監(jiān)聽設置為編譯后的css文件即可。

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

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

也期待BrowserSync可以在未來解決這個問題。

結語

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。