如果你常常使用 gulp 和静态网站生成器（如 Jekyll），你会发现在前端开发中，需要频繁处理 YAML/JSON 格式的 Front Matter，并需要在这些数据基础上生成网站内容。在这种情况下，npm 包 gulp-front-matter 能够很好地帮你解决这个问题。
什么是 gulp-front-matter?
gulp-front-matter 是一个 Gulp 插件，用于处理 Markdown、HTML 和其他模板文件中 YAML/JSON 格式的 Front Matter 数据。它会提取 YAML/JSON 数据，把数据存入文件的一个 frontMatter 属性中，并把处理后的文件传递给 Gulp 流程中的下一个插件。可以通过 frontMatter 属性读取文件的 YAML/JSON 数据，用于进一步生成网站内容。
安装
你需要先安装 gulp 和 gulp-front-matter。在项目目录下，运行以下命令：
npm i gulp gulp-front-matter --save-dev
使用 gulp-front-matter
假设你有一个 article.md 文件，内容如下：
-- -------------------- ---- ------- --- ------ ---- ------- --- ----- ---------- ----- - --------- - ----------- --- - ---- -----------
你可以使用 gulp-front-matter 提取这个 Markdown 文件中的 YAML 数据与正文内容。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------- - -----------------------------
----- -------- - -------------------------
----- ---- - ---------------------
--------------- ---------- -
------ ------------------------
-------------------- -- -- ---- --
----------------- -- - -------- --- ----
--------------------- -----
------
------
----------------------------------------
-------
------
------
----------------------------------
----------------------------------
-------
----------- ------------------------------
-------- ----------------------------
-------
---------- -- ------
---------------------------
---在代码中，我们先用 gulp.src() 读取 article.md 文件，然后使用 gulp-front-matter 中的 frontMatter() 方法提取 YAML 数据。数据被存储在文件对象的 frontMatter 属性中。紧接着，我们使用 gulp-markdown 把 Markdown 转换成 HTML。最后，我们使用 gulp-wrap 在 HTML 内容的基础上，生成一个带有文章元数据的 HTML 文件，最终输出到 ./dist 目录下。
如果你想使用 Mustache 或者 Handlebars 等模板引擎来生成网站内容，你可以用 gulp-wrap 的 file: 方式传递文件对象（包含 YAML 数据与文件内容），如下所示：
-- -------------------- ---- -------
--------------- ---------- -
------ ------------------------
-------------------- -- -- ---- --
----------------- -- - -------- --- ----
--------------------- -----
------
------
------------------------
-------
------
------
------------------
---------------------
-------
----------- --------------
-------- ------------
-------
--------- ----- -------- ------------- -- -------- ----
---------------------------
---总结
gulp-front-matter 让提取 YAML/JSON 数据变得简单，我们可以轻松地生成静态网站并方便地配置网站元数据。此外，gulp-front-matter 不仅适用于 Markdown 文件，也适用于 HTML, Haml, Jade 和 EJS 等模板文件。它在开发单页网站、博客和其他静态页面时非常实用。
参考代码
例子代码存放在 GitHub 上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66392