常規html查看過程:修改html文件-->瀏覽器中刷新-->修改html文件-->瀏覽器中刷新
使用livereload后:修改html文件,瀏覽器自動刷新
可以簡單的理解為livereload就是讓瀏覽器自動幫你刷新html本地文件
也許你會說網絡上有很多livereload的使用方法,最開始瀏覽那些信息花了我一個多小時,但是我的LiveReload依然沒有工作
問題出在哪里?
實際上,LiveReload包括兩部分內容:你需要同時為編輯器和瀏覽器安裝livereload插件,兩個插件的關系是server-client
基本上各大編輯器的插件庫中都能找到LiveReload
至於瀏覽器,你也可以在Chrome和Safari的插件中心找到它
對於初學者而言,Safari的LiveReload並不是那么合適,因為它只支持URL而不支持本地html文件.當然,如果你知道如何使用小型sever工具來發布你的網頁,使用Safari也可以
以下是步驟,使用Chrome和VSCode作為示范:
- 為Chrome安裝LiveReload
如果無法打開插件中心,可以去尋找離線安裝包.安裝完成后,請在擴展管理中確認啟用插件並開啟本地文件支持(這一點很重要)
點我下載離線安裝包
- 為你的編輯器安裝LiveReload插件,在插件中心直接搜索安裝即可
- 如何使用?默認情況下,瀏覽器和編輯器並不會自動為你激活LiveReload的功能
假設用戶現在需要監視一個本地html文件
現在打開編輯器,並在瀏覽器中打開這個html(VSCode中安裝 view in browser 插件)在編輯器中開啟LiveReload-Sever
VSCode中 組合鍵Ctrl+Shift+P 輸入關鍵詞 LiveReload
點擊下面的 LiveReload: Enable/Disable Sever
注意觀察下方的狀態欄,enabled 表示 sever 服務已經開啟.如果需要關閉服務,重復上面的操作即可切換.每次重新啟動編輯器,你都需要執行這個操作
在瀏覽器中開啟LiveReload-Client
在Chrome的右上角找到下面所示按鈕,如果VSC已經開啟了Sever,點擊它之后內部的小圓圈會變為實心圓,每個需要監視的html文件都需要執行這個操作
到這里,基本已經打工告成了.左邊Chrome,右邊VSC,每次保存html,Chrome中就會自動刷新對應的頁面 - 注意
VSCode中,只有當文件屬於打開的文件夾或者工作區,LiveReload-Sever才會響應
關於LiveReload:
當編輯器啟動LiveReload-Server后,每當用戶執行保存操作,Server向所有Client(開啟LiveReload的頁面)發送刷新請求
對於瀏覽器而言,會為開啟LiveReload的頁面臨時插入一個js引用
2018-11-02
更新內容:
找到了一個不需要手動點擊chrome插件的方法,很簡單就是將那段js引用加到你的html文件中
當然每次編寫一個html文件都添加這條js也很煩,不過如果你知道如何使用代碼片段snippets那就很簡單了
大家都知道emmet插件,輸入"doc"然后按tab就可以直接創建html基本結構片段,而snippets就是由用戶自定義的代碼片段
對於vsc在設置中就可以找到snippets功能.比如定義了下面的代碼片段后,我們在html文件(僅html文件有效)中輸入"fs"然后按tab鍵就可以直接填充這部分html代碼
"html with inner css": {
"prefix":"fs",
"body": [
"<!DOCTYPE html>",
"<html>",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <title>Title</title>",
" <style>",
// " ${1}",
" ",
" </style>",
"</head>",
"",
"<body>",
" ${0}",
"</body>",
"",
"</html>",
],
"description": "Log output to console",
}
那么很簡單,將livereload的js引用加入就可以了
"myhtml with livereload": {
"prefix":"fs",
"body": [
"<!DOCTYPE html>",
"<html>",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <title>Title</title>",
" <script src=\"http://127.0.0.1:35729/livereload.js?ext=Chrome&extver=2.1.0\"></script>",
" <style>",
// " ${1}",
" ",
" </style>",
"</head>",
"",
"<body>",
" ${0}",
"</body>",
"",
"</html>",
],
"description": "Log output to console",
},
新建一個html文件測試一下.沒問題
在瀏覽器中打開,直接顯示已經開啟了livereload
更進一步,如果我們開啟了編輯器的自動保存功能,那就是完全自動了,只管寫代碼.當然有時候並不合適,因為在你的代碼還未完成的時候,html就在運行,特別是js,可能會有一些無法預料的后果,所以自己看情況吧
每次啟動vsc都需要啟動livereload-server服務,干脆設置一個快捷鍵吧
