Metalsmith 是一个静态站点生成器，使用 JavaScript 编写并且可扩展。Metalsmith 的最大好处是灵活性很高，但这也意味着需要写大量的配置代码。metalsmith-dev 是一个 Metalsmith 插件，它可以为开发环境提供额外的支持。
本教程将介绍如何使用 metalsmith-dev 插件，包括对于其配置的深入解析，以及在实际开发中的应用指导和示例代码。
安装
在安装之前，我们需要先安装必备的工具 Node.js 和 npm。然后在终端中使用以下命令来安装 metalsmith 和 metalsmith-dev：
npm install --save-dev metalsmith metalsmith-dev
此外，我们还需要一个模板引擎，本文选择使用 Handlebars。可以执行以下命令安装：
npm install --save handlebars
配置
在项目根目录下，新建一个名为 metalsmith.js 的文件。这是 Metalsmith 的配置文件，用来指定文档源、处理插件和输出目录等信息。
在 metalsmith.js 文件中，我们需要首先引入必要的模块：
const metalsmith = require('metalsmith');
const dev = require('metalsmith-dev');
const handlebars = require('handlebars');然后，用以下代码配置 Metalsmith：
-- -------------------- ---- -------
---------------------
-- -----
----------------
-- --------
---------
--------
---------------------
--------
-----------
--
-- -- -------------- --
-----------
-- -- ---------- ----
------------ ----------- ----- -- -
----- -------- - ----------------------
----- -------- - -------- ---------------
----- -------- - -----------------------------
----- -------- - ---------------------------
--- ------ --- -- --------- -
----- ---- - --------------
----- ------- - -------------------------
----- -------- - --------------------------- - --------- ---- ---
------------- - --------------------------------
-
-------
--
-- ----
------------------------
------------ -- -
-- ----- ----- ----
------------------ -----------
---上面的代码中，我们首先使用 metalsmith 函数创建了一个 Metalsmith 对象，并指定了文档源文件为项目根目录下的 src 目录。然后，使用 .ignore 方法指定了需要忽略的文件，这里使用了一个数组来进行多个条件的忽略匹配。
接下来，使用 .use 方法配置插件并使用，这里使用了 metalsmith-dev 插件。当使用 metalsmith-dev 插件后，将自动实现以下功能：
- 开发服务器
- 实时监测修改并自动刷新
- Sass 支持
- WebSocket 通信
最后，使用 .use 方法添加一个 Handlebars 的模板引擎。在这里，我们为每个 .hbs 和 .handlebars 文件编译一个 Handlebars 模板。并使用 metadata 方法获取 Metalsmith 的元数据 (metadata)，并将它传递给 Handlebars。最后，在输出后的目标目录 public 中生成。
到这里，Metalsmith 和 metalsmith-dev 的配置就介绍完了。接下来将看到如何在实际开发中应用这些配置。
示例代码
在这个示例中，我们将创建一个简单的文档网站，包括一个主页和若干文档页。
在项目根目录的 src 目录下，创建以下文件：
src/ ├── index.hbs # 主页模板 ├── about.md # 文档 ├── guide.md # 文档 └── contact.md # 文档
先进入 index.hbs 所在的目录或使用以下命令创建：
mkdir -p src && cd src && touch index.hbs about.md guide.md contact.md
使用编辑器打开 index.hbs 文件，并写入以下内容：
-- -------------------- ---- -------
--------- -----
------
------
------------------------
----- ----------------
-------
------
------------------
-----
----
------ ----------------------
------ ----------------------------------
------ ----------------------------------
------ --------------------------------------
-----
------
------
----------------
-------
-------
-------这就是我们的首页模板，页面加载后将自动展示 nav 及 main 区域，导航链接将指向文档页。
接下来，我们需要编写 about.md、guide.md 和 contact.md 文件，这里我们以 about.md 作为例子。使用编辑器打开 about.md 文件，并输入以下内容：
-- -------------------- ---- ------- - ----- ---- -- -- ------- -- --- ---------- --- --- ------- --- ----- - ------ --- -------- ------ ----- -- -------- - ---------- - ---------- --- - ---------- - --------
这是一个经过 Markdown 渲染好了的 HTML 文章，会在 main 区域展示出这些内容。
到这里，我们已经创建好了一个简单的文档网站。接下来，我们需要运行一个开发服务器来查看这个网站。
在终端中，使用以下命令来启动开发服务器：
node metalsmith.js
在浏览器中访问 http://localhost:3000/，就可以看到我们的主页了。接下来点击导航链接就可以看到相应的文档。
总结
通过本教程，我们已经了解了如何使用 metalsmith-dev 插件来为我们的网站提供额外的功能。由于 Metalsmith 非常灵活，你可以根据自己的需求来扩展它的功能。
同时，我们也了解了整个配置的流程，并实现了一个简单的示例。相信这些内容能够为你的下一个 Metalsmith 项目提供些许指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3e1d8e776d08040b5e