初识 LiveReload

LiveReload 是前端自动化的工具之一。在前端开发中,经常需要实时地看到页面编辑的效果。但每次都要从编辑器切换到浏览器,再刷新浏览器才能看到页面变化,这种频繁的操作严重影响了开发效率。LiveReload 就是用来解决这个问题的。
LiveReload 通过实时检测文件的变化,当文件变化时触发相关任务,并通知浏览器刷新页面。实现 LiveReload 有多种方式,如 Node.js 的 gulp、grunt,Ruby 的 Guard等。本文通过 python 的 LiveReload 介绍其使用。

安装

首先为浏览器安装 LiveReload 插件。该插件可以和后台的相关服务器通信,当服务器通知该插件后,该插件会自动刷新页面。
接着通过pip3 install livereload安装相关 python 包。That’s all~

使用

在 html 所在的文件夹,使用livereload命令即可。这时打开浏览器http://127.0.0.1:35729,就会发现网页会实时刷新了。
但是,有时候你可能需要在刷新之前做一些操作。如使用 Hexo 写文章时,保存文章后你希望能自动地执行hexo g的命令,然后刷新页面。那 LiveReload 能做到吗?当然可以,只需要一段简短的程序即可。
下面是我写的关于上面小需求的代码。

1
2
3
4
5
6
7
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
from livereload import Server, shell
server = Server()
server.watch('source/_posts/*', shell('hexo g'))
server.serve(root='public')

使用 LiveReload 之后,感觉写文章都轻松了很多。