使用 BrowserSync 來實現內容變更以後的實時刷新

時間 2019-12-21

標籤使用 browsersync 實現內容變更以後實時刷新简体版

原文原文鏈接

[ps]這個工具支持不一樣的開發環境, 支持不一樣的開發語種, 不限於前端, 也不限於後端, 實現原理是監聽內容文件夾, 實現改動, 自動刷新, 例如 php, html, css 等等..php

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

安裝

1. 安裝 Node.js

BrowserSync是基於Node.js的, 是一個Node模塊，若是您想要快速使用它，也許您須要先安裝一下Node.jshtml

2. 安裝 BrowserSync

[ps] 若是npm在國內很是慢, 你能夠考慮淘寶鏡像來加速 : 淘寶 NPM 鏡像前端

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

$ npm install -g browser-sync

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

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

$ npm install --save-dev browser-sync

啓動 BrowserSync

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

靜態網站

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

# --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"

UI 管理配置界面

地址: http://localhost:3001

這個就是 browser-sync 控制檯的入口

經常使用配置

$ browser-sync start --help
Usage: /usr/local/bin/browser-sync start [options]

選項：
  --version               顯示版本號
  --server, -s            運行本地服務器 (使用 cwd 做爲web根目錄)
  --serveStatic, --ss     須要監聽靜態文件的目錄
  --port                  指定端口
  --proxy, -p             代理已經存在的網址
  --ws                    代理模式 - 啓用 websocket 代理     [布爾]
  --browser, -b           選擇自動打開的瀏覽器
  --files, -f             須要監聽的文件路徑
  --index                 指定首頁
  --plugins               加載插件
  --extensions            Specify file extension fallbacks
  --startPath             指定開始路徑
  --https                 啓用ssl
  --directory             顯示服務端文件夾列表
  --xip                   Use xip.io domain routing                       [布爾]
  --tunnel                Use a public URL
  --open                  Choose which URL is auto-opened (local, external or
                          tunnel), or provide a url
  --cors                  Add Access Control headers to every request 
  --config, -c            Specify a path to a configuration file
  --host                  Specify a hostname to use
  --logLevel              日誌輸出級別 (silent, info or debug)
  --reload-delay          變動刷新延遲
  --reload-debounce       限制請求頻率
  --ui-port               指定UI界面端口
  --watchEvents           Specify which file events to respond to         [數組]
  --no-notify             禁用瀏覽器右上角通知
  --no-open               不打開新瀏覽器窗口
  --no-online             強制線下使用
  --no-ui                 不啓用UI
  --no-ghost-mode         禁用鏡像模式
  --no-inject-changes     文件變化都須要加載
  --no-reload-on-restart  重啓時候不自動刷新已經打開的瀏覽器
  --help                  顯示幫助信息

示例：
$ browser-sync start -s app  - Use the App directory to serve
                                            files
$ browser-sync start -p      - Proxy an existing website
  www.bbc.co.uk