WEB前端程序开发Web 前端开发 web前端

web初学者:前端开发—liveReload(浏览器自动刷新)

2018-03-28  本文已影响10人  web前端04

本文列举下,如何配置,保存前端代码后,浏览器自动刷新的功能,双屏操作,真的会方便很多,对于前端开发来说,一边写样式,一边看效果,效率翻倍!

在这里我还是要推荐下我自己建的web前端开发学习群:731669587,群里都是学web前端开发的,如果你正在学习前端 ,小编欢迎你加入,今天分享的这个案例已经上传到群文件,大家都是软件开发党,不定期分享干货(只有前端软件开发相关的),包括我自己整理的一份2018最新的前端进阶资料和高级开发教程,欢迎进阶中和进想深入前端的小伙伴。

总体流程:

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;

3.终端安装liveReload

终端执行一下代码:

npm install -g livereload

4.运行liveReload

终端执行一下代码:

livereload [path]

看到这个35729没得,就是上面引用的,这就算,可以了,好了,下一步

5.终端安装http-server

终端执行一下代码:

npm install http-server -g

6.运行http-server

切到项目下

终端执行一下代码:

http-server

云客秀 专注性价比网站开发

上一篇下一篇

猜你喜欢

热点阅读