使用Browsersync熱更新熱替換，解放F5

超簡單的入門小例子，有圖有真相。固然也夠咱們在項目中使用。先看一下目錄結構。

這裏就使用了一個html和一個css樣式表。接下來以下。

1. 安裝 Node.js

　　不會安裝node.js？太落伍了，懶得教你，自行百度吧。

2. 安裝 BrowserSync

安裝完node.js以後，在命令行輸入npm install -g browser-sync

安裝成功後。

2. 啓動 BrowserSync

運行如下其中一條命令。Browsersync將建立一個本地服務器並自動打開你的瀏覽器後訪問http://localhost:3000地址，這一切都會在命令行工具裏顯示。

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

　--files 路徑是相對於運行該命令的項目（目錄）  就是下圖黃色字體的目錄。

這句命令的意思是，啓動BrowserSync 並建立一個本地服務器，監聽BowerSync目錄下全部的css文件。

 

隨後打開了一個網頁。

更改css樣式

此時此刻 咱們的頁面字體顏色變成了紅色。

進階篇

　　咱們在實際開發中，大多數都用本地服務器，我項目的後臺就是php語言，因此用的phpStudy搭建的本地開發環境，問題來了，怎麼使用本地的服務器，也能熱替換個人css，js代碼呢。我在本地建立了一個PHP服務器環境，並經過綁定code.cn來訪問本地服務器，使用如下命令方式，Browsersync將提供一個新的地址localhost:3000來訪問code.cn，並監聽其項目根目錄下的全部css文件。

phpstudyServer是我本地code.cn域名的根目錄，在這個目錄下運行下面的命令

簡單的網站主頁既打開了，修改css樣式，一樣不用刷新便可換了顏色。
Browsersync官網http://www.browsersync.cn/