前端實時視覺化開發工具

三種工具的使用：

liveStyle

官網：http://livestyle.io/

Emmet LiveStyle有如下幾個特點：
1. 即時更新(不會重新載入頁面，樣式修改以後無需儲存也能預覽);;
2. 多個頁面同時預覽(例：同時開啟多個頁面，並且關聯到相同的CSS，此時修改該CSS，這些頁面都能即時顯示修改內容);
3. 雙向修改(在Chrome開發者工具和Sublime Text中，只要有一處修改，兩個工具的樣式都會更改。)
4. 便捷的安裝和使用。

支援三種CSS, LESS and SCSS

需要安裝瀏覽器的外掛和編輯器的外掛

安裝瀏覽器的外掛

1.瀏覽器外掛通過搜尋chrome網上商店“Emmet liveStyle”進行安裝
2.點選右上角的新增至Chrome按鈕

如果你的chrome應用商店無法開啟，你從 http://pan.baidu.com/s/1qYO2C36 或者其他途徑獲得了Emmet LiveStyle外掛，那麼就選擇離線安裝該外掛。由於Emmet LiveStyle外掛同其他chrome外掛一樣都是CRX格式的，下載完成後，新開一個TAB，輸入chrome://extensions/ 開啟下載管理器，找到剛剛下載成功的檔案,拖放剛剛的crx檔案到介面裡，鬆開滑鼠，會彈出安裝提示，點選確定安裝就可以了。

控制檯出現如下圖顯示的樣子，即為安裝成功。


安裝編輯器的外掛

安裝Sublime Text外掛最簡單的方法就是通過Package Control，這是安裝Sublime Text外掛比較好的方式：Package Control會管理所有的外掛安裝的流程，為你進行自動更新。
1.正如描述所說的安裝Package Control(如果你到現在還沒有安裝Package Control)。
2.在Sublime Text中點選Tools > Command Palette…選單欄。
3.在彈出的對話方塊，輸入install package來找到Package Control: Install Package選單欄，用方向鍵進行選擇然後敲擊回車。
4.當載入完成，你可以看到帶有可用的包列表的對話方塊，輸入livestyle來找到LiveStyle包，然後敲擊回車。

過一會LiveStyle外掛就會成功安裝，你可能會重啟Sublime Text來確保所有的東西都正常工作。

在你相繼安裝瀏覽器外掛以及編輯器外掛後，你就可以開始使用LiveStyle。
LiveStyle的所有的設定都是通過Google Chrome擴充套件控制的：

開啟一個需要測試的網頁，然後開啟livestyle監測樣式的變化即可。

liveReload

可參考http://blog.csdn.net/neet007/article/details/51694643 LiveReload外掛安裝、配置及用法

Broswer-Sync：官網 http://www.browsersync.cn/

描述：修改監控的檔案後，自動重新整理頁面

1.包管理（npm）庫中 安裝BrowserSync。開啟一個終端視窗，運用npm全域性安裝browser-sync ，安裝完成後，可以在所有專案(任何目錄)中使用。

npm install -g browser-sync

也可以結合 gulpjs或gruntjs構建工具來使用，在您需要構建的專案裡執行下面的命令:

npm install --save-dev browser-sync

2.主要是運用browser-sync start --server --files "**" 命令來監控檔案，假如你要監控D:\dist\core\static 整個目錄下的檔案，那你就可以 cd 跳到這個目錄下執行：

cd D:\dist\core\static
D:\dist\core\static>browser-sync start --server  --files "**"//監控該目錄下的所有檔案的變化
回車

3.啟動 BrowserSync

靜態網站

---

如果您想要監聽.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"

Browsersync將建立一個本地伺服器並自動開啟你的瀏覽器後訪問http://localhost:3000地址，這一切都會在命令列工具裡顯示。

// 監聽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"

參考文章：http://blog.csdn.net/neet007/article/details/51694643 LiveReload外掛安裝、配置及用法