SublimeText3編輯器(二){LIVE_CODING:及時預覽編寫內容HTML+CSS3}

前一篇(SublimeText3編輯器(一){精簡強大的外掛管理})介紹過Sublime的外掛管理工具,但好用的外掛絕對不止這些,當然最重要的還是編寫完後要看到的效果,如果能夠及時預覽更新就太方便了,不用一直重新整理網頁,有雙螢幕的話也只需要開著另個視窗就可以知道現在寫的CODE有沒有問題;當然影響網頁視覺最主要的當然是HTML本體和CSS樣式表啦,所以這次會介紹兩個外掛LiveReload、LiveStyle來幫助我們加速開發!!

LiveReload for HTML

  1. 首先:在Sublime開啟管理外掛的工具PackageControl (Ctrl+Shit+P),輸入 Install Package
    sublime-001


  2. 搜尋:LiveReload套件,並且安裝。
    sublime-002


  3. 接著:到Chrome安裝對應的外掛。

    sublime-004


  4. 紅框處就是外掛的iCon了,右鍵管理開啟一些功能,並在圖示點擊,圓心變成實心就表示啟動了。
    sublime-005 sublime-006


  5. Sublime端也要做一些設定,然後重開就可以享受即時編輯的威力了。
    sublime-007
    在括號中加上圖中文字存檔
    [“SimpleReloadPlugin","SimpleRefresh"]
    sublime-008

 

LiveStyle for CSS

  1. 緊接著,除了網頁的框架內容及時之外,我們網頁最主要的外觀CSS也來同步一下,到 http://livestyle.io/ 安裝他的主程式工具。
    sublime-009
    依照各位的作業系統選擇版本下載


  2. 安裝完畢開啟會檢查Sublime和Chrome的外掛安裝與否
    sublime-010


  3. Sublime的部分一樣透過套件管理工具輸入 LiveSyle 安裝。
    Chrome的名稱稍微不同搜尋 Emmet LiveStyle 安裝。
    sublime-011 sublime-012



  4. 圖示點開可以選擇單向同步或者雙向同步,並也有每個CSS來源的參照設定。
    sublime-013


    有了這兩項利器做起事來事半功倍!!

Leave a Reply