简介
Metalsmith 是一个静态站点生成器，它使用 Node.js，并使用了 Metalex 的概念。Metalsmith 的工作方式很简单，就是读取文件，让用户利用插件进行转换，然后将输出保存到指定的目录中。
metalsmith-loader 是一个快速实现使用 metalsmith 的编译器和加载器的 npm 包，它简化了 metalsmith 的使用，可以轻松地使用各种不同的模板引擎和更多功能。本文将详细介绍 metalsmith-loader 的使用方法。
安装
运行以下命令进行安装：
npm install metalsmith metalsmith-loader --save
有关比较详细的 Metalsmith 信息可以在此处找到：http://www.metalsmith.io/
使用
下面我们将演示使用 HBS 模板引擎来进行简单的页面生成。
步骤 1：创建目录和文件
我们先创建一个名为 src 的目录，并在该目录中创建一个 index.html 文件以及一个名为 layout.hbs 的 HBS 模板。
src/index.html 文件内容如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------ ------------
-------
------
------------------
------------------
-------
-------src/layout.hbs 文件内容如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
-------
------
--- --------------------------------------------------------------------------------------------------- - --------- --
-------
-------请注意，文件中的所有代码都是 HBS 模板，在这里我们使用 Mustache 模板引擎。你可以使用任何你喜欢的模板引擎。
步骤 2：创建 metalsmith 配置文件
我们还需要为 Metalsmith 指定配置文件，告诉它在哪里找到我们的页面和模板，并将输出保存在哪里。
创建 metalsmith.js 文件，然后复制以下内容：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------ - -----------------------------
----- --- - ----------------------
-------------- - ---------------------
-----------
------ ------------------ ------
--
----------------
-------------
-------- --------------
------- -------------
---------- --------
--------- -
------- -------------
--
---------------- -------- -------- -
-------------------------------- ---- -----------
--
----------------- -------- -------- ----- -
------------- - -------
--
---
-------------------------- 对于
pattern，所有匹配到的文件都将通过处理器运行，所以要确保文件名的正确性。 engine用于指定使用的模板引擎。partials是为了加载模板中可复用代码段的名称列表。onEngineCreated是在模板引擎实例化时运行的函数，用于将代码复制到引擎实例中。onEngineRendered在模板引擎渲染完所有页面后运行，并用于处理结果。
步骤 3：编译和查看输出
现在，我们可以通过以下命令来编译并生成静态站点:
node metalsmith.js
如果一切顺利，你现在应该可以在输出路径 (./public/index.html) 中看到编译后的页面。
总结
我们介绍了如何使用 metalsmith-loader 配合 HBS 模板引擎来生成静态站点。这是一个基础案例，我们可以通过更多的开源工具和插件来轻松定制它。希望这篇介绍经过的深度和学习及指导性，可以帮助您更好的使用 Metalsmith 并提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f401d8e776d08040c3d