《LiveReload》讓Sublime Text儲存後網頁自動同步更新

梅問題-《LiveReload》讓Sublime Tetxt儲存後網頁自動同步更新
  現在製作網頁已有不少朋友,漸漸從Dreamweaver投向Sublime Text的懷抱,最主要的原因則在於,目前網頁的技術進步的相當快,雖然說新版的Dreamweaver CC已支援CSS3,但很遺憾的事,在編輯網頁的過程中,依然只能在程式碼中來編輯網頁,在它的設計模式中,則完並無法完整的呈現出最終的效果,還是得透過瀏覽器,才能完整的瀏覽網頁的結果,且若開發RWD自適應的網頁,在Dreamweaver的設計模式中,則完全無法正常的顯示,因此在Dreamweaver時,也一樣只能用程式碼模式,所以這時使用Sublime Text會更加的快速與方便,同時還可長期使用無需購買。
  但Dreamweaver也非一無事處,還是有它便利的地方,比方說在新版的Dreamweaver多了Live模式,以及點一下地球,就可直接將編輯的網頁,直接開啟瀏覽器,所以在預覽畫面時相當的方便,因此梅干也請教了好友男丁大大,Sublime Text是否也有類似的功能,沒想到不但有此功能,且還更人性化,當Sublime Text儲存完畢後,網頁就會自動的同步更新,如此一來連按重整鈕都省下了,因此也有在用Sublime Text編輯網頁的朋友,就一塊來看看這隻外掛吧!!
瀏覽器同步更新外掛:
套件名稱:LiveReload
適用平台:Google Chrome
套件下載:Chrome商店

Sublime Text安裝LiveReload外掛:
Step1
首先,開啟Sublime Text編輯器,再按Ctrl+Shit+P,並輸入Install Package
梅問題-《LiveReload》讓Sublime Tetxt儲存後網頁自動同步更新
Step2
再輸入LiveRload
梅問題-《LiveReload》讓Sublime Tetxt儲存後網頁自動同步更新
Step3
這樣就安裝完畢囉!
梅問題-《LiveReload》讓Sublime Tetxt儲存後網頁自動同步更新
Chrome瀏覽器安裝LiveReload外掛:
Step4
接著瀏覽器也要安裝相關外掛才能運作,開啟Google Chrome瀏覽器,進入外掛套件後,點一下免費鈕,就會自行下載與安裝。
梅問題-《LiveReload》讓Sublime Tetxt儲存後網頁自動同步更新
Step5
當安裝完畢後,在瀏覽器網址後方,就會看到一個reload圖示,點一下再選擇管理
梅問題-《LiveReload》讓Sublime Tetxt儲存後網頁自動同步更新
Step6
進入管理畫面後,將LiveReload選項中的允許存取檔案的選項勾起來。
梅問題-《LiveReload》讓Sublime Tetxt儲存後網頁自動同步更新
實測LiveReload:
Step7
接著將網頁開啟,並將瀏覽器網址後方的LiveReload的圖示點一下,當看到中間的圓心變成實心時,表示已啟用,這時Sublime Text視窗的左下角,也會出現同步的文字訊息,這時只要在Sublime Text編輯好網頁,儲存瀏覽器的頁面就會自動的同步更新,真是超方便的啦!各位也趕快試試囉!
梅問題-《LiveReload》讓Sublime Tetxt儲存後網頁自動同步更新

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 4 梅留言

  • 第1梅
    Gill 說道:

    您好,

    我有按步驟操作,st編輯完下方也有出現livereload的字樣,chrome上的icon也是黑色實心,至同步更新的效果沒有出現,請問有可能是什麼問題嗎? 謝謝。

    回應:
    檢查看路徑是否有中文檔名