HTML运行到浏览器自动刷新,web前端开发之热加载—liveReload(浏览器自动刷新)...
今天主要寫一下,如何配置,保存前端代碼后,瀏覽器自動刷新的功能,雙屏操作,真的會方便很多,對于前端開發來說,一邊寫樣式,一邊看效果,爽翻~
圖片發自簡書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(浏览器自动刷新)...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python暴力破解zip密码文件
- 下一篇: Cisco新一代桌面IP 电话 7800