HTML實時預覽 livereload完整使用方法

常規html檢視過程:修改html檔案-->瀏覽器中重新整理-->修改html檔案-->瀏覽器中重新整理

使用livereload後:修改html檔案,瀏覽器自動重新整理

可以簡單的理解為livereload就是讓瀏覽器自動幫你重新整理html本地檔案

也許你會說網路上有很多livereload的使用方法,最開始瀏覽那些資訊花了我乙個多小時,但是我的livereload依然沒有工作

問題出在**?

實際上,livereload包括兩部分內容:你需要同時為編輯器和瀏覽器安裝livereload外掛程式,兩個外掛程式的關係是server-client

基本上各大編輯器的外掛程式庫中都能找到livereload

至於瀏覽器,你也可以在chrome和safari的外掛程式中心找到它

對於初學者而言,safari的livereload並不是那麼合適,因為它只支援url而不支援本地html檔案.當然,如果你知道如何使用小型sever工具來發布你的網頁,使用safari也可以

以下是步驟,使用chrome和vscode作為示範:

為你的編輯器安裝livereload外掛程式,在外掛程式中心直接搜尋安裝即可

如何使用?預設情況下,瀏覽器和編輯器並不會自動為你啟用livereload的功能

假設使用者現在需要監視乙個本地html檔案

現在開啟編輯器,並在瀏覽器中開啟這個html(vscode中安裝 view in browser 外掛程式)

在編輯器中開啟livereload-sever

在瀏覽器中開啟livereload-client

在chrome的右上角找到下面所示按鈕,如果vsc已經開啟了sever,點選它之後內部的小圓圈會變為實心圓,每個需要監視的html檔案都需要執行這個操作

到這裡,基本已經打工告成了.左邊chrome,右邊vsc,每次儲存html,chrome中就會自動重新整理對應的頁面

注意vscode中,只有當檔案屬於開啟的資料夾或者工作區,livereload-sever才會響應

關於livereload:

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

對於瀏覽器而言,會為開啟livereload的頁面臨時插入乙個js引用

更新內容:

找到了乙個不需要手動點選chrome外掛程式的方法,很簡單就是將那段js引用加到你的html檔案中

當然每次編寫乙個html檔案都新增這條js也很煩,不過如果你知道如何使用**片段snippets那就很簡單了

大家都知道emmet外掛程式,輸入"doc"然後按tab就可以直接建立html基本結構片段,而snippets就是由使用者自定義的**片段

對於vsc在設定中就可以找到snippets功能.比如定義了下面的**片段後,我們在html檔案(僅html檔案有效)中輸入"fs"然後按tab鍵就可以直接填充這部分html**

"html with inner css": ",

"","",
"",],
"description": "log output to console",
}

"myhtml with livereload": ",

"","",
"",],
"description": "log output to console",
},

在瀏覽器中開啟,直接顯示已經開啟了livereload

更進一步,如果我們開啟了編輯器的自動儲存功能,那就是完全自動了,只管寫**.當然有時候並不合適,因為在你的**還未完成的時候,html就在執行,特別是js,可能會有一些無法預料的後果,所以自己看情況吧

每次啟動vsc都需要啟動livereload-server服務,乾脆設定乙個快捷鍵吧

HTML實時預覽 LiveReload完整使用方法

常規html檢視過程 修改html檔案 瀏覽器中重新整理 修改html檔案 瀏覽器中重新整理 使用livereload後 修改html檔案,瀏覽器自動重新整理 可以簡單的理解為livereload就是讓瀏覽器自動幫你重新整理html本地檔案 也許你會說網路上有很多livereload的使用方法,最開...

Atom 編輯器實現HTML實時預覽

在編輯框中按ctrl shift m可以開啟原生預覽。不帶css樣式 已經不需要像之前網上說的要修改快捷鍵了 呼叫快捷鍵 ctrl shift alt r 在atom內開啟瀏覽器 在atom外開啟瀏覽器寫個gulp 任務跑 livereload外掛程式，需要架成http。不會gulp可以入門 使用b...

實時自定義預覽的效果

實現自定義的控制項，除了系統預設的一些屬性之外，還可以自己進行新增，所以設計人員若要修改，只要修改引數即可 在這裡 選擇addtarget 隨後新增mycustomview 隨後在mycustonview中，新增乙個檔案，為myview繼承自uiview 在myview中新增如下 讓storyboa...