在前端开发中，我们经常需要手动刷新浏览器来查看修改后的效果。这样的过程繁琐且浪费时间，因此自动刷新工具应运而生。其中一个流行的工具就是 connect-livereload。
什么是 connect-livereload？
connect-livereload 是基于 Node.js 的一个中间件，提供了自动刷新浏览器的功能。它可以与各种构建工具和服务器集成，并在代码修改后自动刷新页面。
安装
使用 npm 安装 connect-livereload：
npm install connect-livereload --save-dev
使用
使用 connect-livereload 非常简单。以下是一个示例，在 Express 应用程序中使用 connect-livereload 中间件：
-- -------------------- ---- ------- ----- ---------- - ------------------------------ ----- ------- - ------------------- ----- --- - ---------- ---------------------- ---------------- -- -- - ------------------- -- ------- -- ---- ------- ---
这里我们引入 connect-livereload 模块并将其作为 Express 中间件使用。当文件修改时，connect-livereload 会向浏览器发送消息，告诉它需要刷新页面。
要使 connect-livereload 生效，还需要在 HTML 文件中添加以下脚本：
<script src="//localhost:35729/livereload.js"></script>
这里的 35729 是 connect-livereload 默认的端口号。如果需要使用其他端口，可以在启动应用程序时进行配置：
app.use(livereload({
port: 12345
}));
// HTML 文件中相应的脚本
<script src="//localhost:12345/livereload.js"></script>注意事项
connect-livereload只适用于开发环境，在生产环境中请不要使用。- 如果你使用了 HTTPS 协议，请确保在 HTML 文件中使用 HTTPS 的地址。
结语
connect-livereload 让前端开发变得更加高效和愉悦。希望通过本文的学习和实践，读者们能够掌握如何使用 connect-livereload 实现前端自动刷新。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/40797