BrowserSync的安裝和使用

BrowserSync真是前端必備神器，瀏覽器同步工具。簡單來講就是當你保存文件的同時瀏覽器自動刷新網頁，省去了手動的環節，大大的節省了開發時間，這個工具是基於nodejs的，能夠經過npm安裝，不在囉嗦

安裝Node後，經過npm安裝BrowserSync：

npm install -g browser-sync

而後，就能夠開始使用了。打開控制檯進入項目所在的目錄，而後輸入像這樣的命令：

browser-sync start --server --files "css/*.css"

這個命令用於純靜態站點，也就是僅一些.html文件的狀況。後面的--files "css/*.css"，是指監聽css目錄中的後綴名爲.css的文件。請注意這個命令裏的start --server，這實際上是BrowserSync本身啓動了一個小型服務器。

若是是動態站點，則使用代理模式。例如PHP站點，已經創建了一個本地服務器如http://localhost:8080，此時會是這樣的命令：

browser-sync start --proxy "localhost:8080" --files "css/*.css"

BrowserSync會提供一個新地址（如未被佔用的話，http://localhost:3000）用於訪問。

若是簡單只是想要監聽整個項目，能夠寫成這樣：

browser-sync start --server  --files "**"

在控制檯裏嘗試只輸入：

browser-sync

你會看到BrowserSync完整的控制檯命令指南。其中能夠看到有這個命令：

browser-sync init

運行它，將在當前目錄生成一個配置文件bs-config.js。

參照官方文檔修改這個文件，而後運行

browser-sync start --config bs-config .js

就將以bs-config.js的完整配置信息運行BrowserSync
下面是我運行時臨時截了一張圖

3001端口是後臺地址，裏面可本身開啓和關閉一些功能，想要終止當前目錄，用ctrl+c命令打斷便可，清空用cls命令
另外也能夠經過gulp使用這個工具，Gulp是如今流行的自動化工具，但BrowserSync並無Gulp插件版，由於並不須要。
BrowserSync有本身獨立的API，將它註冊爲gulp的一個task便可，送上官方的傳送門