[TOC] # Browsersync ># 省時的瀏覽器同步測試工具--www.browsersync.cn Browsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）并自動刷新頁面。更重要的是 Browsersync可以同時在PC、平板、手機等設備下進項調試。您可以想象一下：“假設您的桌子上有pc、ipad、iphone、android等設備，同時打開了您需要調試的頁面，當您使用browsersync后，您的任何一次代碼保存，以上的設備都會同時顯示您的改動”。無論您是前端還是后端工程師，使用它將提高您30%的工作效率。 ## 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文件，并在全局下安裝它們，您可以在所有項目(任何目錄)中使用。 當然您也可以結合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地址，這一切都會在命令行工具里顯示。你也可以查看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" ~~~