美文网首页WEB前端程序开发Web 前端开发 web前端
web初学者:前端开发—liveReload(浏览器自动刷新)

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

作者: web前端04 | 来源:发表于2018-03-28 19:55 被阅读10次

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

    在这里我还是要推荐下我自己建的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

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

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/cciucftx.html