LiveReload真正有效的使用方法

在學習HTML的時候,我很快意識到自己過多的使用了F5來重新整理Chrome頁面,於是找到了LiveReload這個外掛.當用戶在編輯器中儲存html/css/js檔案的時候,瀏覽器會立即重新整理對應頁面.然而不知什麼原因,在網路上逛了一個多小時,我的LiveReload外掛並不能產生作用.我想一些初學者可能會和我一樣,事後分析其原因,大致是因為當時對於編輯器(Sublime)的一些功能並不是很熟悉.另外,LiveReload並不是一個常規意義上的外掛,這一點不同於其他外掛-安裝就能立即使用.

LiveReload實質上需要編輯器和瀏覽器雙方共同的支援,也就是說你需要為這兩者安裝外掛.基本上各大編輯器的外掛庫中都能找到LiveReload.至於瀏覽器,你也可以在Chrome和Safari的外掛中心找到它.對於初學者而言,Safari的LiveReload並不是那麼合適,因為它只支援URL而不支援本地html檔案.當然,如果你已經能夠建立本地的Web-Sever來發布你的網頁,使用Safari也是可以的

具體的步驟如下,這裡使用Chrome和VSCode來做示範:

1. 為Chrome安裝LiveReload.如果無法開啟其外掛中心,可以去尋找離線安裝包.安裝完後,請確認啟用外掛並開啟本地檔案支援
   
   

    

2. 為你的編輯器安裝LiveReload外掛,在外掛中心直接搜尋安裝即可,不需要額外的設定
   
3. 如何使用?這裡是最關鍵的一點,預設情況下,瀏覽器和編輯器並不會自動為你開啟LiveReload,使用者需要一定的手動操作來使LiveReload生效
   假設使用者現在需要監視一個html檔案.現在開啟編輯器,並在瀏覽器中開啟這個html

   在編輯器中開啟LiveReload-Sever

   在編輯器中開啟LiveReload-Sever.對於VSCode,你需要使用組合鍵Ctrl+Shift+P調出提示欄,輸入關鍵詞"LiveReload",點選下面的LiveReload: Enable/Disable Sever
   

   注意觀察下方的狀態列,如果出現enable提示,表示sever已經開啟
   

   每次重新啟動編輯器,你都需要執行這個操作

   在瀏覽器中開啟LiveReload-Client

   在Chrome的右上角找到下面所示按鈕,如果編輯器已經開啟了Sever,點選它之後內部的小圓圈會變為實心圓(你需要為每個需要監視的頁面執行此操作)
   
   至此,你的LiveReload大概可以正常工作了
4. 已知的問題
   VSCode中,只有當檔案屬於開啟的資料夾或者工作區,LiveReload-Sever才會響應
   
   

附: LiveReload 原理淺析

編輯器啟動LiveReload-Server後,每當使用者執行儲存操作,Server向所有Client(開啟LiveReload的頁面)傳送重新整理請求

對於瀏覽器而言,會為開啟LiveReload的頁面臨時插入一個js程式碼

這個js應當是用來響應Server的重新整理請求的

更具體的有待各位探究