npm 包 metalsmith-livereload 使用教程-JavaScript中文网-JavaScript教程资源分享门户

Metalsmith 是一款静态网站生成器，其使用简单，但是需要手动刷新浏览器才能查看修改后的效果。为了避免手动刷新带来的不便，我们可以使用 metalsmith-livereload 这个 npm 包实现自动刷新浏览器功能。本文将详细介绍使用 metalsmith-livereload 的方法，包括其配置和使用。

安装 metalsmith-livereload

在使用之前，需要先安装 metalsmith-livereload：

npm install --save-dev metalsmith-livereload

配置 metalsmith-livereload

在生成静态网站的 metalsmith 配置文件中，添加对 metalsmith-livereload 插件的配置：

const metalsmith = require('metalsmith');
const livereload = require('metalsmith-livereload');

metalsmith(__dirname)
  .use(livereload())
  .build();

在上述代码中，我们向 metalsmith 的 use() 方法中添加了 livereload 函数，该函数默认监听 35729 端口。如果需要自定义端口，则可以传入配置参数，如下所示：

metalsmith(__dirname)
  .use(livereload({
    port: 12345
  }))
  .build();

以上代码将在 12345 端口启动 liveReload。

配置 chrome 插件

上述配置完成后，还需要在浏览器中安装 Chrome 插件来实现自动刷新的功能。搜索并安装 LiveReload 插件即可。

安装完成后，在 Chrome 浏览器右上角，可以看到有一个小圆点图标，表明 LiveReload 插件已经安装成功。

使用示例

接下来，为了验证刚刚的配置，我们创建一个简单的示例项目来演示如何使用 metalsmith-livereload。

1. 准备工作

我们需要先在本地创建一个空目录 test，接着在该目录下，初始化一个 npm 项目：

cd test
npm init

紧接着，安装 metalsmith 以及 pug 插件：

npm install --save-dev metalsmith metalsmith-pug

在该空目录下创建一个 src 目录，用于存放源代码，接着在 src 目录下创建一个名为 index.pug 的文件：

doctype html
html(lang="zh")
  head
    title= "metalsmith-livereload 使用教程"
  body
    h1 使用 metalsmith-livereload 自动刷新浏览器

2. 创建 metalsmith 配置文件

在 test 目录下新建 metalsmith.js 文件，用于存放 Metalsmith 的配置信息：

-- -------------------- ---- -------
----- ---------- - ----------------------
----- --- - --------------------------
----- ---------- - ---------------------------------

---------------------
  --------------           -- - --- ------
  ---------------------   -- --- ----- --
  -----------             -- - --- ----- ----
  ------------------      -- -- ----------
  ------------ -- -
    -- ----- ----- ----
    ------------------ -----------
  ---

上述代码中，我们使用了 metalsmith-pug 插件将 Pug 模板编译为静态 HTML 文件，使用 metalsmith-livereload 插件集成了 liveReload。

3. 运行

在 test 目录下执行以下命令即可启动 metalsmith 服务器：

node metalsmith.js

然后，访问 http://localhost:8080/ 查看效果即可。

在浏览器中打开 LiveReload 插件，确保已启用 liveReload 功能。

最后，修改 src/index.pug 文件，保存后浏览器会自动刷新，从而看到修改后的效果。

至此，我们已经成功地使用了 metalsmith-livereload 实现了自动刷新浏览器的功能。这将极大地提高我们的开发效率，减少了手动刷新浏览器带来的烦恼。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5ef2be318c4ce90ee4ca3b64