BrowserSync — 你值得擁有的前端同步測試工具

本文同步自個人博客 Reeoo's Blog，歡迎移步前往，^_^

BrowserSync是一個同步多瀏覽器頁面測試工具。有了它，你在IDE裏面修改完文件，頁面就會同步刷新，你不再須要手動去按F5刷新啦~

適用場景

在作Hybrid項目的時候，由於測試須要，桌子上可能會同時放幾臺測試機，同時進行兼容性測試，再加上PC電腦，一堆設備擺在你的面前，你每在IDE改一個東西，就要去挨個設備刷新網頁，這不是很low嗎？在人類文明高度發達的今天，這種事情怎麼能忍呢？
這時候，BrowserSync就應該登場了，只要全部連接到BrowserSync的網頁，對應的源碼被修改，並保存，那麼，這些網頁就會被自動刷新，不再須要你一個一個刷新了。

1分鐘上手

1. 安裝nodeJs

2. 安裝BrowserSync

   $ npm install -g browser-sync

3. 啓動BrowserSync

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

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

OK,是否是真的只須要一分鐘（被牆的時間除外哦~）？，你的BrowserSync就歡快的跑起來了，BrowserSync啓動的時候會自動啓動自帶的靜態的服務器,經過這個服務器來訪問網頁，能夠看到這個提示：

也正式由於這個靜態的服務器的存在，BrowserSync不須要安裝任何的瀏覽器插件，就能夠處理項目文件，不像livereload，必需要安裝瀏覽器插件，強烈建議使用livereload的夥伴，放棄它，擁抱BrowserSync吧~

基本原理

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

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

多文件監聽

BrowserSync經過--files指定須要監聽的文件,在作項目的時候，咱們不可能之監聽一種文件，那樣效率會很低，若是想同時監聽整個項目文件的變化，那麼可使用下面的命令：

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

**表明監聽當前目錄下的全部文件的變化，咱們只須要在項目根目錄開啓BrowserSync便可監聽整個項目，固然，BrowserSync仍然會正確地判斷文件變化是不是css。

整合到Gulp構建流程中

Gulp是如今前端比較流行的自動化構建工具了（具體的用法能夠看個人另外一片文章，Gulp簡易入坑），Gulp基於插件來作構建，可是BrowserSync並無提供Gulp的插件版本，即便是這樣，咱們也能夠在Gulp環境中來使用它，只須要把BrowserSync做爲node的一個模塊require進來，就能夠調用其相關的API：下面是一段gulpfile.js的示例：

var gulp = require('gulp');
var BrowserSync = require('browser-sync');//引入模塊

gulp.task('browser-sync', function() {//註冊任務
    BrowserSync({//調用API
        files: "**",//監聽整個項目
        server: {
            baseDir: "./"監聽當前路徑
        }
    });
});

gulp.task('default', ["browser-sync"]);

而後在命令行中運行Gulp這個任務，便可實現和browser-sync start --server --files "**"同樣的功能。

高級用法

在控制檯裏嘗試輸入：

$ browser-sync init

回車，而後你會發現，當前目錄多了一個bs-config.js文件，這個是BrowserSync的配置文件。有關BrowserSync的全部運行配置都在這個裏面，咱們能夠參考官方給出的文檔進行修改，而後以這個配置文件來運行BrowserSync：

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

除了自動刷新，還有啥

第一次使用BrowserSync的時候，連接上BrowserSync的服務器以後就把頁面發給了UI設計師，讓他們去作UI驗收工做，他們走後，我發現個人網頁會莫名奇妙的自動上下滾動，還有一些按鈕被自動點擊，很詭異，後來發下，這原來也是BrowserSync搗的鬼，
BrowserSync除了自動刷新，默認配置下，BrowserSync會在打開你當前網頁的全部瀏覽器中同步滾動條位置，表單行爲和點擊事件。有關表單行爲的情形大概像醬紫：

這雖然是一個很酷的功能，BUT，有時候會影響咱們本身的操做，若是你不像被影響，能夠把這個功能關掉。怎麼關呢，請繼續往下看咯~

UI界面

BrowserSync自帶一個UI控制面板，UI控制面板的地址跟靜態服務器的地址同樣，只是端口號比靜態服務器的端口號大1(默認狀況下，是這樣)，大概看一下UI控制面板的樣子：

在上面這個圖裏面有這麼一個東西：

從上到下依次是控制按鈕的點擊、窗口的滾動、表單的提交、表單輸入域的輸入、單選多選按鈕的Check是否開啓同步的開關，若是不想開啓這些功能的同步，能夠直接把前面的開關關掉，就不會再收到別人的影響了。
這個UI控制面板裏面還有一些其它的東西，就不一一列表了，有興趣的同窗，能夠本身折騰一下~

總結

所謂工欲善其事必先利其器，有了BrowserSync，能節約一點時間是一點時間，時間長了，單身狗就能夠騰出手來去約妹子啦~啦啦啦~