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

省時(shí)的瀏覽器同步測(cè)試工具

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

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

簡(jiǎn)化操作流程

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

工作中您需要它

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

插入到您的工作流程

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

文件同步

    當(dāng)您改變HTML，CSS，圖像和其他項(xiàng)目文件瀏覽器會(huì)自動(dòng)更新。

瀏覽器支持

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

構(gòu)建工具兼容

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

如何使用

1. 安裝 Node.js

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

2. 安裝 BrowserSync

    您可以選擇從Node.js的包管理（NPM）庫(kù)中 安裝BrowserSync。打開(kāi)一個(gè)終端窗口，運(yùn)行以下命令：

npm install -g browser-sync

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

    當(dāng)然您也可以結(jié)合gulpjs或gruntjs構(gòu)建工具來(lái)使用，在您需要構(gòu)建的項(xiàng)目里運(yùn)行下面的命令:

npm install --save-dev browser-sync

3. 啟動(dòng) BrowserSync

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

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

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

// --files 路徑是相對(duì)于運(yùn)行該命令的項(xiàng)目（目錄） browser-sync start --server --files "css/*.css"

    如果您需要監(jiān)聽(tīng)多個(gè)類(lèi)型的文件，您只需要用逗號(hào)隔開(kāi)。例如我們?cè)偌尤胍粋€(gè).html文件

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

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

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

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

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

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

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

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

gulp

    首先，您需要安裝 Browsersync 和 依賴(lài)包 Gulp 。如果你是第一次安裝，那么你可以通過(guò)--save-dev命令，這將會(huì)自動(dòng)在你的package.JSON里添加依賴(lài)，下一次再安裝時(shí)，你只需要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ù)器

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

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

Proxy（代理）

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

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

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

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