今天主要寫一下，如何配置，保存前端代碼后，瀏覽器自動刷新的功能，雙屏操作，真的會方便很多，對于前端開發來說，一邊寫樣式，一邊看效果，爽翻~

圖片發自簡書App

一、開發環境

1.電腦系統：mac

2.代碼編輯器：sublime text 3

3.項目框架：最簡單的前端項目，html+css+js(最多用下jq)

4.瀏覽器：chrome

5.熱加載:liveReload

二、配置步驟

好了現在就可以開始一步一步的配置，來實現熱加載的功能啦~

總體流程：

1.瀏覽器添加liveReload插件 → 2.Sublime text3端 → 3.終端安裝liveReload → 4.運行liveReload → 5.終端安裝http-server → 6.運行http-server → 7.瀏覽器運行

1.瀏覽器添加liveReload插件(這個就太簡單了，不懂自己百度吧)

----安裝完了要重啟一道瀏覽器，看到右上角有個圈圈，里面有個紅色點點，就算成功了

成功樣例

2.Sublime text3端

① 安裝liveReload插件 → ② 項目公共js添加livereload.js

① 安裝liveReload插件：

這個我也不想細講，不懂自己百度，sublime插件應該都會安裝吧

記得在setting里面加一句配置

{"enabled_plugins": ["SimpleReloadPlugin","SimpleRefresh"]}

重啟；ok；

② 項目公共js添加livereload.js

記住這個35729,是下一步的鋪墊；

以上參考：http://blog.csdn.net/neet007/article/details/51694643

3.終端安裝liveReload

好現在是在終端操作，盆友們，

終端執行一下代碼：

npm install -g livereload

4.運行liveReload

終端執行一下代碼：

livereload [path]

以上參考：https://www.npmjs.com/package/livereload

看到這個35729沒得，就是上面引用的，這就算，可以了，好了，下一步

5.終端安裝http-server

終端執行一下代碼：

npm install http-server -g

6.運行http-server

切到項目下

終端執行一下代碼：

http-server

看到沒得！成功了

http://192.168.8.7:8080/就直接對應著ygm這個項目了

比如我要訪問一個文件，直接輸入ok 了！

http://192.168.8.7:8080/拼圖/html/shopping/actionsheet.html

7.瀏覽器運行

直接在瀏覽器打開? ? http://192.168.8.7:8080/拼圖/html/shopping/actionsheet.html

就有熱加載功能，sublime這邊保存，瀏覽器就可以自動更新啦

以上參考：https://www.npmjs.com/package/http-server

三、結束

好了，就是這么簡單，祝大家好運！

總結

以上是生活随笔為你收集整理的HTML运行到浏览器自动刷新,web前端开发之热加载—liveReload（浏览器自动刷新）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。