web自动化工具-livereload

2024-10-15 13:52:07

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&extver=2.1.0"></script>

//注意端口号：35729，想具体了解原理的，自行查找资料即可。

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

高级使用

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

最新文章

热门文章