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

圖片發(fā)自簡(jiǎn)書App

一、開發(fā)環(huán)境

1.電腦系統(tǒng)：mac

2.代碼編輯器：sublime text 3

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

4.瀏覽器：chrome

5.熱加載:liveReload

二、配置步驟

好了現(xiàn)在就可以開始一步一步的配置，來實(shí)現(xiàn)熱加載的功能啦~

總體流程：

1.瀏覽器添加liveReload插件 → 2.Sublime text3端 → 3.終端安裝liveReload → 4.運(yùn)行l(wèi)iveReload → 5.終端安裝http-server → 6.運(yùn)行http-server → 7.瀏覽器運(yùn)行

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

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

成功樣例

2.Sublime text3端

① 安裝liveReload插件 → ② 項(xiàng)目公共js添加livereload.js

① 安裝liveReload插件：

這個(gè)我也不想細(xì)講，不懂自己百度，sublime插件應(yīng)該都會(huì)安裝吧

記得在setting里面加一句配置

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

重啟；ok；

② 項(xiàng)目公共js添加livereload.js

記住這個(gè)35729,是下一步的鋪墊；

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

3.終端安裝liveReload

好現(xiàn)在是在終端操作，盆友們，

終端執(zhí)行一下代碼：

npm install -g livereload

4.運(yùn)行l(wèi)iveReload

終端執(zhí)行一下代碼：

livereload [path]

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

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

5.終端安裝http-server

終端執(zhí)行一下代碼：

npm install http-server -g

6.運(yùn)行http-server

切到項(xiàng)目下

終端執(zhí)行一下代碼：

http-server

看到?jīng)]得！成功了

http://192.168.8.7:8080/就直接對(duì)應(yīng)著ygm這個(gè)項(xiàng)目了

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

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

7.瀏覽器運(yùn)行

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

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

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

三、結(jié)束

好了，就是這么簡(jiǎn)單，祝大家好運(yùn)！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。