web自动化工具-livereload

时间:2021-07-12 15:36:59

web自动化工具-livereload

livereload是一个很神奇的工具,主要解放了F5键,监听文件变动,整个页面自动刷新。
可搭载gulp等构建工具使用。和liveStyle 针对样式文件相比,可监听任何文件。

livereload文档

安装插件

  • 打开Chrome网上应用商店,安装插件livereload.
  • 打开终端控制台
    1
    sudo npm install -g livereload

使用

  • 路径切到项目目录,启动服务(这里依然使用http-server启动)。

    1
    2
    3
    4
    5
    http-server
    Starting up http-server, serving ./
    Available on:
    http://127.0.0.1:8080
    http://192.168.1.5:8080
  • 路径切到项目目录,启动livereload。(切到项目目录,是为了只监听本项目文件,防止监听文件过多,造成机器卡顿)

    1
    2
    livereload
    Starting LiveReload v0.6.0 for /Users/xudongsheng/Documents/project/web-auto-tool/livereload on port 35729.
  • 启动Chrome浏览器,打开服务文件,启动 livereload插件,插件中心的空心圈圈会变成实心圆圈。
    打开控制台,开启插件的时候,细心的同学可能会发现dom中多了一行:

    1
    2
    <script src="http://127.0.0.1:35729/livereload.js?ext=Chrome&amp;extver=2.1.0"></script>
    //注意端口号:35729,想具体了解原理的,自行查找资料即可。

至此,相信你就可以愉快的体验 自动刷新功能了,赶快试试吧。

高级使用

当然,具体到项目都是搭载脚本使用的,这些教程应该有很多,推荐参考官方教程使用。