web自动化工具-livereload

最新推荐文章于 2024-08-30 08:25:31 发布

weixin_30901729

最新推荐文章于 2024-08-30 08:25:31 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/donglegend/p/6081029.html

本文介绍了一个神奇的web自动化工具——livereload。该工具能够监听文件变动并自动刷新页面，极大提高了开发效率。通过安装Chrome插件并配置相关命令，可以轻松实现网页实时更新的功能。

web自动化工具-livereload

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

livereload文档

安装插件

打开Chrome网上应用商店，安装插件livereload.
打开终端控制台

1

sudo npm install -g livereload

使用

路径切到项目目录，启动服务（这里依然使用http-server启动）。

        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，想具体了解原理的，自行查找资料即可。

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