1. 程式人生 > >前端實時視覺化開發工具

前端實時視覺化開發工具

三種工具的使用:

liveStyle

這裡寫圖片描述

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

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

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

npm install -g browser-sync

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

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"