ps : 其實這是一個標題黨, 真正實現的原理是 使用 BrowserSync 來實現內容變動之後的實時重新整理
既然提到了, 那我就先給出命令, 讓大家知曉標題黨的一番苦心, 同時也讓大家少走這種彎路, 提交開發效率
# --proxy : 這裡是本地開發域名
# --files : 這裡是需要監聽的檔案列表, 不限於這些
$ browser-sync start --proxy "local.dev.domain" --files "public/css/*.css,app/Http/controllers/,resources/views/ "詳細內容如下↓↓↓↓
-------------------------------分割線-------------------------------
[ps]這個工具支援不同的開發環境, 支援不同的開發語種, 不限於前端, 也不限於後端, 實現原理是監聽內容資料夾, 實現改動, 自動重新整理, 例如 php, html, css 等等..
Browsersync 能讓瀏覽器實時、快速響應您的檔案更改（html、js、css、sass、less等）並自動重新整理頁面。更重要的是Browsersync可以同時在PC、平板、手機等裝置下進項除錯。您可以想象一下：“假設您的桌子上有pc、ipad、iphone、android等裝置，同時開啟了您需要除錯的頁面，當您使用browsersync後，您的任何一次程式碼儲存，以上的裝置都會同時顯示您的改動”。無論您是前端還是後端工程師，使用它將提高您30%的工作效率。
安裝
1. 安裝 Node.js
BrowserSync是基於Node.js的, 是一個Node模組， 如果您想要快速使用它，也許您需要先安裝一下Node.js
2. 安裝 BrowserSync
[ps] 如果npm在國內非常慢, 你可以考慮淘寶映象來加速 : 淘寶 NPM 映象
您可以選擇從Node.js的包管理（NPM）庫中 安裝BrowserSync。開啟一個終端視窗，執行以下命令：
$ npm install -g browser-sync您告訴包管理器下載BrowserSync檔案，並在全域性下安裝它們，您可以在所有專案(任何目錄)中使用。
當然您也可以結合gulpjs或gruntjs構建工具來使用，在您需要構建的專案裡執行下面的命令:
$ npm install --save-dev browser-sync啟動 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"UI 管理配置介面
這個就是 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參考資料
本作品採用《CC 協議》，轉載必須註明作者和本文連結