前端開發：實時刷新（及時預覽）工具小彙總，兼有gulp+browser-sync設置方法

本身寫標籤： 實時刷新、 免F五、 gulp + browser-sync

開門見山，首先講明一下本文的定位吧：
寫這篇文章是由於本身在平時的學習中，一次次試驗了不少的前端實時刷新工具，有順手的，有蹩腳的，有簡單的，有麻煩的，安裝完又折騰，折騰完又卸載，體驗完這些也着實花費了很多時間，就在昨天又剛剛折騰完gulp+browser-sync的方法，估計可讓我消停一陣子了。這篇文章主要介紹和彙總一下我用過和見過的前端頁面實時刷新工具（就是ctrl+s以後實現頁面刷新的意思，以爲F5刷新也不麻煩的朋友們就能夠沒必要往下讀了哈），但願能爲你挑選本身喜歡的工具節省些時間，也少些糾結，閒言少敘，下面開始

工具列表（順序：從安裝方便到功能強大）

1.自帶及時預覽功能的編輯器：

Atom brackets webstorm
上述三者都是大名鼎鼎的編輯器，插件衆多，功能強大，爲前端開發人員們在工做中立下汗馬功勞，也深受開發人員們的喜好，所以也是教程衆多，我就再也不多說了。google一下，你就知道如何使用它們的及時預覽功能了。可是這些工具的及時預覽有一點不爽：預覽界面內嵌在編輯器界面內，減少了對整張網頁的視覺效果，Atom和Brackets都存在這樣的問題（固然這也不算是問題了，全看我的喜愛）。如Atom編輯器使用atom-preview-html實現的效果：
而webstorm實現預覽的效果是很讚的，右上角會有多個瀏覽器的logo圖標，想在哪一個瀏覽器打開就點擊哪一個就行了，挺方便。webstorm自己也是算是前端人員熟知的編輯器中體量和功能至關強大的了，除了打開速度有點慢以外，沒啥說的。

2.sublime text3

• 把sublime text3單獨拿出來講是有緣由的，首先它是我長期使用的第一款編輯器，有我的情愫在其中不免沒有偏心之心。最喜歡的就是它超快的打開響應速度，有種說幹就幹的爽快勁兒，即使安裝了一大堆的插件兒也絲毫沒有以爲變緩慢，點個贊。
  說到插件就不得不說sublime編輯器是沒有自帶及時預覽功能的，可是能夠經過插件來實現：好比sidebarEnhancement，在html文件名上右鍵打開open in Browser就能夠查看效果了，這其實就是最傳統的 ctrl+s+F5刷新預覽大法，只不過直接在編輯器上打開瀏覽器了而已。

• 還可使用livereload方法，可是比較古老了，感興趣的話能夠google一下（若是你能夠忍受各類各樣的V1推廣，V2推廣等不相關內容強佔你的頁面，固然也能夠用百度啦）

• 之前做爲新手，對於命令行操做的工具備畏懼感，因此接觸到「F5免刷新工具的時候」(點擊進入它的官網可下載)一會兒被其可視化的界面操做吸引了，用它在瀏覽器中打開文件以後，在編輯器中編輯完代碼，ctrl+s便可實現自動刷新，很方便，用了很長一段時間都以爲十分方便，可是最近發現它老是在沒有進行任何操做的時候自動刷新一遍，在瀏覽器中找好的節點位置一會兒又不見了，搞得正在盯着屏幕看代碼的我很詫異，有種正津津有味看着大片兒一會兒電腦黑屏的趕腳，看了下工具做者好多年沒更新了，只好戀戀不捨地先棄掉這一工具另謀它法。

在網上百般尋找，最後找到了這麼一款工具：browser-sync

Browsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）並自動刷新頁面。更重要的是 Browsersync能夠同時在PC、平板、手機等設備下進項調試。您能夠想象一下：「假設您的桌子上有pc、ipad、iphone、android等設備，同時打開了您須要調試的頁面，當您使用browsersync後，您的任何一次代碼保存，以上的設備都會同時顯示您的改動」。不管您是前端仍是後端工程師，使用它將提升您30%的工做效率。

有了它，您不用在多個瀏覽器、多個設備間來回切換，頻繁的刷新頁面。更神奇的是您在一個瀏覽器中滾動頁面、點擊等行爲也會同步到其餘瀏覽器和設備中，這一切還能夠經過可視化界面來控制。

以上是中文網站上的介紹，非常吸引我，果斷決定就用它了！（其實國內也有一款之相似的工具puer ,兩者功能接近，但BrowserSync更強大，我就主要介紹他了

開始安裝：

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

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

npm install -g browser-sync

這條命令至關於告訴包管理器下載BrowserSync文件，並在全局下安裝它們，您能夠在全部項目(任何目錄)中使用。

固然您也能夠結合gulpjs或gruntjs構建工具來使用，在您須要構建的項目裏運行下面的命令:

npm install --save-dev browser-sync

3.啓動 BrowserSync
一個基本用途是，若是您只但願在對某個css文件進行修改後會同步到瀏覽器裏。那麼您只須要運行命令行工具，進入到該項目（目錄）下，並運行相應的命令：

靜態網站

若是您想要監聽.css文件, 您須要使用服務器模式。 BrowserSync 將啓動一個小型服務器，並提供一個URL來查看您的網站。

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

若是您須要監聽多個類型的文件，您只須要用逗號隔開。例如咱們再加入一個.html文件

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

咱們作了一個靜態例子的示範，您能夠下載示例包，文件您能夠解壓任何盤符的任何目錄下，不能是中文路徑。打開您的命令行工具，進入到BrowsersyncExample目錄下，運行如下其中一條命令。Browsersync將建立一個本地服務器並自動打開你的瀏覽器後訪問http://localhost:3000 地址， 這一切都會在命令行工具裏顯示。若是遇到can not GET/這樣的提示，說明你在當前文件夾下沒有index.html文件，若是想查看的是當前目錄下的css文件夾下面的某html5.html文，要更改訪問地址爲：http://localhost:3000/css/html5.html ，這樣就能正常訪問了。
你也能夠查看Browsersync靜態示例視頻：

不明白上述教程必定要點開看這個連接！！！這裏視頻演示的是使用方法

// 監聽css文件
browser-sync start --server --files "css/*.css"
// 監聽css和html文件
browser-sync start --server --files "css/*.css, *.html"

動態網站

若是您已經有其餘本地服務器環境PHP或相似的，您須要使用代理模式。 BrowserSync將經過代理URL(localhost:3000)來查看您的網站。

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

在本地建立了一個PHP服務器環境，並經過綁定Browsersync.cn來訪問本地服務器，使用如下命令方式，Browsersync將提供一個新的地址localhost:3000來訪問Browsersync.cn，並監聽其css目錄下的全部css文件。

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

一點建議，其實也是gulp+browser-sync方法的介紹，算是本文核心（我如今用的方法）

咱們建議您結合gulp或grunt來使用，咱們這裏有詳細說明Gulp文檔、Grunt文檔。若是您尚未使用gulp或grunt，那麼能夠經過以上方式建立Browsersync
鑑於browser-sync中文網站上給出的教程已經很去那面細緻了，我就照搬了部分過來，可是實際使用browser-sync以後，估計你會發現，每次啓動都要打開git bash或者其餘命令窗工具，輸入

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

命令行的方法太冗長，因此我就研究了下搭配gulp使用的方法，實際證實官方推薦的方法確實蠻省勁兒的，可是他們沒有給出具體詳細的設置方法，我在這裏寫點更爲詳細的方法好了：
確定有對gulp工具不是很熟悉的人看這篇文，一次都沒接觸過也不用怕，他就像個大管家，是來統籌管理前端各種比較雜的工具的大總管，你是主人，有什麼須要提早給他吩咐好，他會去讓各類工具備序幹活兒。因此這裏能夠理解爲把啓動browser-sync的命令交由gulp去完成，咱們的目標是隻要在命令框裏輸入個gulp就能執行browser-sync。
這裏推薦一篇學習gulp的文章,注意學習其中對於命令行參數的解釋
在上面的教程中的gulpfile.js文件中寫好以下內容：

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']); //定義默認任務

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

stackoverflow commits start

QUESTION: BrowserSync extremely slow???

The solution is quite simple - but illogical imho. I had my local instance running under http://project.local. Changing it to http://project.dev solved the issue. I'm running OS X.

Works. But... but... why? – henrijs Nov 7 '14 at 8:42

:-) If you are running OS X as well, I guess it has something to do with DNS lookups (Bonjour is using the .local domain as well). – Rico Leuthold Nov 7 '14 at 16:01

Amazing tip for mac users. Thanks so much! – Armel Larcier Nov 15 '14 at 16:13

Had the same issue on Linux Ubuntu 14 and changing my URL from 'local.domain.co.uk' to 'domain.dev' worked perfectly! So thank you as never would of solved it otherwise. – Josh Davies Mar 26 at 11:44

This works on Ubuntu 14.10. An explanation as to why a .com slows browserSync down would be nice though. – fauxnoir Jun 11 at 21:10

stackoverflow commits end

而後從新打開命令行工具，鍵入「gulp"，而後回車，稍等會兒，看看是否是就能打開browser-sync了？這裏其實就是把browser-sync設置爲了gulp的默認任務了而已，等你須要用到gulp調用其餘工具的時候，能夠再做修改。