這是一個神器，相比LiveRoad使用比較簡單，建議做前端開發(fā)的同學，不要猶豫和觀察，趕緊裝上釋放你的F5吧。以下來自己browser-sync中文網(wǎng)的介紹和使用方法。

省時的瀏覽器同步測試工具

     Browsersync能讓瀏覽器實時、快速響應(yīng)您的文件更改（html、JS、css、sass、less等）并自動刷新頁面。更重要的是 Browsersync可以同時在PC、平板、手機等設(shè)備下進項調(diào)試。您可以想象一下：“假設(shè)您的桌子上有pc、ipad、iphone、Android等設(shè)備，同時打開了您需要調(diào)試的頁面，當您使用browsersync后，您的任何一次代碼保存，以上的設(shè)備都會同時顯示您的改動”。無論您是前端還是后端工程師，在網(wǎng)站制作中使用它將提高您30%的工作效率。

     有了它，在網(wǎng)站設(shè)計后期調(diào)試中，您不用在多個瀏覽器、多個設(shè)備間來回切換，頻繁的刷新頁面。更神奇的是您在一個瀏覽器中滾動頁面、點擊等行為也會同步到其他瀏覽器和設(shè)備中，這一切還可以通過可視化界面來控制。

簡化操作流程

    每個網(wǎng)頁在不同設(shè)備的瀏覽器里，測試時間呈指數(shù)級增長，無論是PC還是移動端。曾經(jīng)我們每改一次的代碼，都需要手動去刷新一次頁面，查看我們的改動是否正確；現(xiàn)在，BrowserSync減少了重復的手工任務(wù)，這一切都交給BrowserSync去完成，我們只需專注在業(yè)務(wù)的邏輯里去。

工作中您需要它

    BrowserSync是建立在網(wǎng)絡(luò)技術(shù)上的，您可以輕松安裝在OS X，Windows或Linux上，然后在不同的設(shè)備及瀏覽器里進行調(diào)試。就連UI都可以運行在瀏覽器 - 嘗試在另一臺設(shè)備上創(chuàng)建第二頁面來控制您的BrowserSync。

插入到您的工作流程

    通過可視化的操作方式或命令行來創(chuàng)建個性化的測試環(huán)境，多設(shè)備共同響應(yīng)。BrowserSync很容易與您的網(wǎng)絡(luò)平臺集成，構(gòu)建工具和其他Node項目中，例如gulp、Grunt。

文件同步

    當您改變HTML，CSS，圖像和其他項目文件瀏覽器會自動更新。

瀏覽器支持

    支持PC，平板電腦和手機之間的即時同步。各種文件及時響應(yīng)，堪稱完美。

構(gòu)建工具兼容

    可輕松與grunt、gulp等工具配合使用，或包含在其它node項目里。

如何使用

1. 安裝 Node.js

    BrowserSync是基于Node.js的, 是一個Node模塊， 如果您想要快速使用它，也許您需要先安裝一下Node.js
安裝適用于Mac OS，Windows和Linux。

2. 安裝 BrowserSync

    您可以選擇從Node.js的包管理（NPM）庫中 安裝BrowserSync。打開一個終端窗口，運行以下命令：

npm install -g browser-sync

    您告訴包管理器下載BrowserSync文件，并在全局下安裝它們，您可以在所有項目(任何目錄)中使用。

    當然您也可以結(jié)合gulpjs或gruntjs構(gòu)建工具來使用，在您需要構(gòu)建的項目里運行下面的命令:

npm install --save-dev browser-sync

3. 啟動 BrowserSync

    一個基本用途是，如果您只希望在對某個css文件進行修改后會同步到瀏覽器里。那么您只需要運行命令行工具，進入到該項目（目錄）下，并運行相應(yīng)的命令：

靜態(tài)網(wǎng)站

    如果您想要監(jiān)聽.css文件, 您需要使用服務(wù)器模式。 BrowserSync 將啟動一個小型服務(wù)器，并提供一個URL來查看您的網(wǎng)站。

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

    如果您需要監(jiān)聽多個類型的文件，您只需要用逗號隔開。例如我們再加入一個.html文件

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

動態(tài)網(wǎng)站

    如果您已經(jīng)有其他本地服務(wù)器環(huán)境PHP或類似的，您需要使用代理模式。 BrowserSync將通過代理URL(localhost:3000)來查看您的網(wǎng)站。

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

    在本地創(chuàng)建了一個PHP服務(wù)器環(huán)境，并通過綁定Browsersync.cn來訪問本地服務(wù)器，使用以下命令方式，Browsersync將提供一個新的地址localhost:3000來訪問Browsersync.cn，并監(jiān)聽其css目錄下的所有css文件。

browser-sync start --proxy "Browsersync.cn" "css/*.css"

結(jié)合構(gòu)建工具

    我們建議您結(jié)合gulp或grunt來使用，我們這里有詳細說明Gulp文檔、Grunt文檔。如果您還沒有使用gulp或grunt，那么可以通過以上方式創(chuàng)建Browsersync

gulp

    首先，您需要安裝 Browsersync 和 依賴包 Gulp 。如果你是第一次安裝，那么你可以通過--save-dev命令，這將會自動在你的package.JSON里添加依賴，下一次再安裝時，你只需要npm install

$ npm install browser-sync gulp --save-dev

然后，在您的 gulpfile.js 文件里使用它們。

var gulp        = require('gulp');var browserSync = require('browser-sync').create();// 靜態(tài)服務(wù)器gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});// 代理gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "你的域名或IP"
    });
});

 grunt

首先，你需要安裝 Browsersync 插件

$ npm install grunt-browser-sync --save-dev

... 然后將此行添加到您的 Gruntfile.js

grunt.loadNpmTasks('grunt-browser-sync');

靜態(tài)文件服務(wù)器

    我們來看一個簡單的CSS例子，使用內(nèi)置的服務(wù)器引用靜態(tài)HTML / CSS / JS文件。這個單獨的配置將創(chuàng)建一個小型服務(wù)器（使用當前的工作目錄為基準），當你的CSS文件修改后，這些變化將會自動注入到瀏覽器里，實時顯示。

browserSync: {
    bsFiles: {
        src : 'assets/css/*.css'
    },
    options: {
        server: {
            baseDir: "./"
        }
    }
}

Proxy（代理）

    如果你已經(jīng)有一個本地的服務(wù)器設(shè)置（虛擬主機等），只需要告訴Browsersync，剩下的工作將由它為你完成。

browserSync: {
    dev: {
        bsFiles: {
            src : 'assets/css/style.css'
        },
        options: {
            proxy: "local.dev"
        }
    }
}

原文鏈接：browser-sync自動刷新，釋放你的F5 版權(quán)所有，轉(zhuǎn)載時請注明出處，違者必究。

歡迎專注北京網(wǎng)站建設(shè)公司   瑩晨設(shè)計