概述
在前端开发中，我们经常需要实时地反映代码修改的效果，而手动刷新页面是一项费劲且浪费时间的任务。为了解决这一问题，我们可以使用 livereload，它可以监控文件的变化并自动刷新页面以显示最新的更改。express-livereload 就是一个可以在 Express 项目中使用 livereload 的 npm 包。
安装
首先，我们需要在项目根目录下安装 express-livereload：
npm i express-livereload --save-dev
请注意，我们使用了 --save-dev 参数而不是 --save 参数，因为 express-livereload 只用于开发环境，运行时不需要。
配置
在 Express 应用中，我们需要使用 livereload 中间件来实现 livereload 功能。
-- -------------------- ---- -------
----- ------- - -------------------
----- ---------- - ------------------------------
----- --- - ----------
--------------- -
--------- --------- - ---------
---
-------------------------------- - ------------
---------------- -- -- -
---------------- --------- -- ---- --------
---在上面的示例代码中，我们创建了一个 Express 应用，并使用 livereload 中间件。我们指定了要监控的目录 /public，并将其传递给 livereload 中间件的配置参数 watchDir 中。
然后，我们将静态文件服务添加到 Express 应用中，这样我们可以在浏览器中加载静态文件。最后，我们让应用在本地的 3000 端口上监听请求，并在控制台中输出监听成功的信息。
运行
现在，您可以在终端中进入项目目录并运行以下命令：
node index.js
该命令会运行 index.js 文件中的代码，并在本地的 3000 端口上启动 Express 应用。打开浏览器并访问 http://localhost:3000，您应该可以看到 Express 应用的欢迎页面。
接下来，您可以进行文件的更改，express-livereload 将依据您的更改自动刷新页面，以展现最新修改的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb400b5cbfe1ea061120f