實(shí)時(shí)刷新（及時(shí)瀏覽）工具小總結(jié)，兼有g(shù)ulp+browser-sync設(shè)置方法

開門見山，首先講明一下本文的定位吧：
寫這篇文章是因?yàn)樽约涸谄綍r(shí)的學(xué)習(xí)中，一次次試驗(yàn)了很多的前端實(shí)時(shí)刷新工具，有順手的，有蹩腳的，有簡單的，有麻煩的，安裝完又折騰，折騰完又卸載，體驗(yàn)完這些也著實(shí)花費(fèi)了不少時(shí)間，就在昨天又剛剛折騰完gulp+browser-sync的方法，估計(jì)可以讓我消停一陣子了。這篇文章主要介紹和匯總一下我用過和見過的前端頁面實(shí)時(shí)刷新工具（就是ctrl+s之后實(shí)現(xiàn)頁面刷新的意思，覺得F5刷新也不麻煩的朋友們就可以不必往下讀了哈），希望能為你挑選自己喜歡的工具節(jié)省些時(shí)間，也少些糾結(jié)，閑言少敘，下面開始介紹。

1.自帶及時(shí)預(yù)覽功能的編輯器：

Atom brackets webstorm
上述三者都是大名鼎鼎的編輯器，插件眾多，功能強(qiáng)大，為前端開發(fā)人員們在工作中立下汗馬功勞，也深受開發(fā)人員們的喜愛，因此也是教程眾多，我就不再多說了。google一下，你就知道如何使用它們的及時(shí)預(yù)覽功能了。但是這些工具的及時(shí)預(yù)覽有一點(diǎn)不爽：預(yù)覽界面內(nèi)嵌在編輯器界面內(nèi)，減小了對整張網(wǎng)頁的視覺效果，Atom和Brackets都存在這樣的問題（當(dāng)然這也不算是問題了，全看個(gè)人喜好）。如Atom編輯器使用atom-preview-html實(shí)現(xiàn)的效果：

而webstorm實(shí)現(xiàn)預(yù)覽的效果是很贊的，右上角會(huì)有多個(gè)瀏覽器的logo圖標(biāo)，想在哪個(gè)瀏覽器打開就點(diǎn)擊哪個(gè)就好了，挺方便。webstorm本身也是算是前端人員熟知的編輯器中體量和功能相當(dāng)強(qiáng)大的了，除了打開速度有點(diǎn)慢之外，沒啥說的。

2.sublime text3

把sublime text3單獨(dú)拿出來說是有原因的，首先它是我長期使用的第一款編輯器，有個(gè)人情愫在其中難免沒有偏愛之心。最喜歡的就是它超快的打開響應(yīng)速度，有種說干就干的爽快勁兒，即便安裝了一大堆的插件兒也絲毫沒有覺得變緩慢，點(diǎn)個(gè)贊。
說到插件就不得不說sublime編輯器是沒有自帶及時(shí)預(yù)覽功能的，但是可以通過插件來實(shí)現(xiàn)：比如sidebarEnhancement，在html文件名上右鍵打開open in Browser就可以查看效果了，這其實(shí)就是最傳統(tǒng)的 ctrl+s+F5刷新預(yù)覽大法，只不過直接在編輯器上打開瀏覽器了而已。

還可以使用livereload方法，但是比較古老了，感興趣的話可以google一下（如果你可以忍受各種各樣的V1推廣，V2推廣等不相關(guān)內(nèi)容強(qiáng)占你的頁面，當(dāng)然也可以用百度啦）

以前作為新手，對于命令行操作的工具有畏懼感，所以接觸到“F5免刷新工具的時(shí)候”(點(diǎn)擊進(jìn)入它的官網(wǎng)可下載)一下子被其可視化的界面操作吸引了，用它在瀏覽器中打開文件之后，在編輯器中編輯完代碼，ctrl+s即可實(shí)現(xiàn)自動(dòng)刷新，很方便，用了很長一段時(shí)間都覺得十分方便，但是最近發(fā)現(xiàn)它總是在沒有進(jìn)行任何操作的時(shí)候自動(dòng)刷新一遍，在瀏覽器中找好的節(jié)點(diǎn)位置一下子又不見了，搞得正在盯著屏幕看代碼的我很詫異，有種正津津有味看著大片兒一下子電腦黑屏的趕腳，看了下工具作者好多年沒更新了，只好依依不舍地先棄掉這一工具另謀它法。

在網(wǎng)上百般尋找，最后找到了這么一款工具：browser-sync

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

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

以上是中文網(wǎng)站上的介紹，很是吸引我，果斷決定就用它了�。ㄆ鋵�(shí)國內(nèi)也有一款之類似的工具puer ,二者功能接近，但BrowserSync更強(qiáng)大，我就主要介紹他了

開始安裝：

1.下載安裝node.js
2.安裝 BrowserSync

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

npm install -g browser-sync

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

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

npm install --save-dev browser-sync

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

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

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

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

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

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

我們做了一個(gè)靜態(tài)例子的示范，您可以下載示例包，文件您可以解壓任何盤符的任何目錄下，不能是中文路徑。打開您的命令行工具，進(jìn)入到BrowsersyncExample目錄下，運(yùn)行以下其中一條命令。Browsersync將創(chuàng)建一個(gè)本地服務(wù)器并自動(dòng)打開你的瀏覽器后訪問http://localhost:3000 地址， 這一切都會(huì)在命令行工具里顯示。如果遇到can not GET/這樣的提示，說明你在當(dāng)前文件夾下沒有index.html文件，如果想查看的是當(dāng)前目錄下的css文件夾下面的某html5.html文，要更改訪問地址為：http://localhost:3000/css/html5.html ，這樣就能正常訪問了。
你也可以查看Browsersync靜態(tài)示例視頻：這里視頻演示的是使用方法

// 監(jiān)聽css文件
browser-sync start --server --files "css/*.css"
// 監(jiān)聽css和html文件
browser-sync start --server --files "css/*.css, *.html"

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

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

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

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

我們建議您結(jié)合gulp或grunt來使用，我們這里有詳細(xì)說明Gulp文檔、Grunt文檔。如果您還沒有使用gulp或grunt，那么可以通過以上方式創(chuàng)建Browsersync
鑒于browser-sync中文網(wǎng)站上給出的教程已經(jīng)很去那面細(xì)致了，我就照搬了部分過來，但是實(shí)際使用browser-sync之后，估計(jì)你會(huì)發(fā)現(xiàn)，每次啟動(dòng)都要打開git bash或者其他命令窗工具，輸入

browsersync start --server --file "/.html，/*.css"

命令行的方法太冗長，所以我就研究了下搭配gulp使用的方法，實(shí)際證明官方推薦的方法確實(shí)蠻省勁兒的，但是他們沒有給出具體詳細(xì)的設(shè)置方法，我在這里寫點(diǎn)更為詳細(xì)的方法好了：

肯定有對gulp工具不是很熟悉的人看這篇文，一次都沒接觸過也不用怕，他就像個(gè)大管家，是來統(tǒng)籌管理前端各類比較雜的工具的大總管，你是主人，有什么需要提前給他吩咐好，他會(huì)去讓各種工具有序干活兒。所以這里可以理解為把啟動(dòng)browser-sync的命令交由gulp去完成，我們的目標(biāo)是只要在命令框里輸入個(gè)gulp就能執(zhí)行browser-sync。

這里推薦一篇學(xué)習(xí)gulp的文章,注意學(xué)習(xí)其中對于命令行參數(shù)的解釋
在上面的教程中的gulpfile.js文件中寫好如下內(nèi)容：

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
 
// Static server
gulp.task('browser-sync', function() {
    var files = [
    '**/*.html',
    '**/*.css',
    '**/*.js'
    ];
    browserSync.init(files,{
        server: {
            baseDir: "./"
        }
    });
});
 
// Domain server
//gulp.task('browser-sync', function() {
//    browserSync.init({
//        proxy: "yourlocal.dev"
//    });
//});
gulp.task('default',['browser-sync']); //定義默認(rèn)任務(wù)

上面的代碼中Domain server部分是針對啟用了本地服務(wù)器的設(shè)置方法，注意proxy： "yourlocal.dev" 中的dev有很重要的作用哦！下面引用一段stackoverflow上人們的評論看下

然后重新打開命令行工具，鍵入“gulp"，然后回車，稍等會(huì)兒，看看是不是就能打開browser-sync了？
這里其實(shí)就是把browser-sync設(shè)置為了gulp的默認(rèn)任務(wù)了而已，等你需要用到gulp調(diào)用其他工具的時(shí)候，可以再作修改。

以上就是實(shí)時(shí)刷新（及時(shí)預(yù)覽）工具小匯總，兼有g(shù)ulp+browser-sync設(shè)置方法的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！