前言
作为前端工程师，我们往往需要写一些技术博客或者文档，而这些文章又需要有目录索引，方便读者查找和阅读。手动编写目录十分耗费时间和精力，所以我们可以使用 gulp-markdown-index 这个 npm 包快速的生成目录并插入到文章中。
简介
gulp-markdown-index 是一个用于生成 markdown 文件目录索引的 gulp 插件。它主要的作用就是扫描 markdown 文件，并生成对应的目录索引，插入到 markdown 文件中。
安装
首先，我们需要先在项目中安装 gulp 和 gulp-markdown-index 两个 npm 包：
--- ------- ---- ------------------- ----------
使用
接下来，就可以在 gulpfile.js 中使用 gulp-markdown-index 插件了。
下面是一个使用示例：
----- ---- - ---------------- ----- -------- - ------------------------------- --------------------- ---------- - ------ ------------------- ------------------------- ------------------------- --- -------------------- -------------------------
这里，我们首先定义了一个名为 'markdown' 的 gulp 任务，该任务的作用是扫描 md 文件夹下所有的 markdown 文件，并将生成的目录索引插入到 toc.md 中。最后，将处理过的文件输出到 dist 文件夹。
使用方法非常简单，只需要将需要生成目录索引的 markdown 文件扔到 md 目录下，然后执行 gulp 命令即可，在 dist 目录下可以找到处理过的文件。
配置
gulp-markdown-index 可以接受两个参数，第一个参数是用于保存索引目录的文件名，第二个参数是一个选项配置对象。
保存目录索引文件名
第一个参数是用于保存目录索引文件名的字符串，如果省略则默认使用 'README.md'。在上面的例子中，我们显式地指定了保存文件的名称。
选项配置对象
除了可选的第一个参数外，还可以在使用时将一个对象作为第二个参数传递给 gulp-markdown-index。该对象可以用于配置各种选项，包括标题标签，标题深度，TOC 的嵌入点等等。下面是一个示例：
----- ---- - ----------------
----- -------- - -------------------------------
--------------------- ---------- -
------ -------------------
------------------------ -
----------- --
--------- --
------------- -----
----------- ------
------------ -- --------
---
-------------------------
---
-------------------- -------------------------在这个例子中，我们在对象参数中指定了以下各项：
- startLevel: 标题索引的起始深度，默认值为 2。
- endLevel: 标题索引的截止深度，默认值为 3。
- insertAnchor: 是否自动在每个标题前插入一个锚点，默认为 true。
- anchorName: 锚点名称，默认为 toc。
- tocTemplate: TOC 的模板字符串，默认为 '# TOC\n\n'。
总结
使用 gulp-markdown-index 插件可以大大简化编写 markdown 文章时的目录编写工作，将更多的注意力集中在文章创作和内容创新上。本文对该工具的使用做了详细的介绍，并提供了示例代码和配置选项，希望能对读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f7f238a385564ab6adb