用 LiveReload 实现自动刷新页面

在 web 开发中，经常需要修改代码并刷新页面以查看更改的效果。而每次手动刷新页面都相当繁琐且浪费时间。使用 LiveReload 可以自动监测文件变化并自动刷新页面，提高开发效率。

LiveReload 是什么？

LiveReload 是一个自动刷新浏览器的工具，它通过监听指定的文件（HTML/CSS/JS 等），当这些文件内容发生更改时，自动刷新浏览器以显示最新的内容。LiveReload 是一个跨平台、跨浏览器的工具，支持 Mac、Windows、Linux 和各种浏览器。

LiveReload 官方网站：http://livereload.com/

安装 LiveReload

LiveReload 支持多种安装方式，包括命令行工具和浏览器插件等。这里我们以 Chrome 浏览器插件为例进行介绍。

1. 首先需要在 Chrome 应用商店中搜索“LiveReload”插件，或者访问 https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei 进行安装。

2. 安装完成后，启动 LiveReload 插件，点击菜单栏上的 LiveReload 图标，选择要监听的文件夹。

3. 如果 LiveReload 正常工作，则会在菜单栏上显示一个小黑点。此时，当你修改文件并存储后，浏览器会自动刷新页面以显示最新的内容。

使用 LiveReload

使用 LiveReload 非常简单，只需要启动插件并选择要监听的文件夹即可。以下是如何使用 LiveReload 的步骤：

1. 首先，确保已安装 LiveReload 插件并启动。

2. 在项目的 HTML、CSS、JS 等文件中添加以下代码片段：

<script src="http://localhost:35729/livereload.js"></script>

这将在浏览器中引入一个 JavaScript 文件，用于接收 LiveReload 发送的刷新指令。

3. 在浏览器中打开网页，并启动 LiveReload。

4. 修改文件并保存，浏览器将自动刷新页面以显示最新的内容。

总结

LiveReload 是一个非常实用的工具，可以极大地提高 web 开发效率。使用 LiveReload，你可以实现自动刷新页面，从而无需手动刷新页面以查看最新的更改效果。如果你是一名 web 开发人员，一定要试试 LiveReload，相信它会带给你不少惊喜。