在前端开发中，我们经常需要使用自动刷新工具，以便在修改代码后立即看到效果。其中，LiveReload 是一个流行的工具，它能够在浏览器中自动刷新页面。
在使用 LiveReload 对本地开发服务器进行监视时，我们常常使用到 connect-livereload-https 这个 npm 包。
安装
使用 npm 安装 connect-livereload-https：
npm install connect-livereload-https --save-dev
使用
使用 connect-livereload-https 的方式非常简单，只需要在 Express 服务器中添加中间件即可。
var livereload = require('connect-livereload-https');
var express = require('express');
var app = express();
app.use(livereload({
port: 35729,
ignore: ['.js', '.svg']
}));在上面的代码中，我们引入了 connect-livereload-https 包，并将它添加为 Express 服务器的中间件。这里的 port 参数用来设置 LiveReload 服务器的端口号，默认为 35729，与 LiveReload 扩展的端口号相同。
同时，我们还可以使用 ignore 参数来设置需要忽略的文件扩展名。在上面的代码中，我们忽略了 .js 和 .svg 文件的变化。
示例代码
为了更好地理解 connect-livereload-https 的使用方法，我们可以结合一个简单的示例代码来演示它的使用。
- 安装依赖
在命令行中进入项目目录，执行以下命令：
npm install express connect-livereload-https --save-dev
- 创建文件
在项目根目录下创建一个名为 index.js 的文件，内容如下：
-- -------------------- ---- ------- --- ------- - ------------------- --- ---------- - ------------------------------------ --- --- - ---------- -------------------- ----- ------ ------- ------- ------- ---- -------------------------------- - ------------ ---------------- -------- -- - ------------------- -- --------- -- ---- ------- ---
在 public 目录下创建一个 index.html 文件，内容如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------- ---------- ----- ------------ ------- ------ ----------- -- ------- ---------- ----- ---------- ------ ------ --- ---- ------- -- ---- ------------ ------- -------
- 启动服务器
在命令行中执行以下命令：
node index.js
- 安装浏览器扩展程序
前往 LiveReload 官网 下载 LiveReload 浏览器扩展程序，并按照教程安装。
- 查看效果
在浏览器中打开以下网址：
http://localhost:300
修改 index.html 文件后保存，你将会看到页面自动刷新！
结论
通过本文，我们了解了如何使用 connect-livereload-https 简单地实现 LiveReload 自动刷新功能。在实际的开发过程中，这个工具可以帮助我们提高开发效率，减少编写代码时的等待时间。
如果你希望获得更多关于 LiveReload 的信息，可以参考官网上的文档和示例：https://livereload.com.
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1f81e8991b448dacc8