在进行博客发布等操作时，经常会使用 Markdown 格式书写博客，在书写时，我们会使用一些图片来辅助阐述我们的观点。常常会出现图片丢失的情况，这就需要我们手动去查找并上传图片，非常繁琐。而 gulp-add-missing-post-images-cli 就是这种情况下的一款可以帮助我们自动添加所需图片的 npm 包。
安装
使用 npm 来进行安装：
npm install gulp-add-missing-post-images-cli --save-dev
使用方法
添加图片
在我们的 Markdown 文件中，图片链接通常会使用相对链接，如下所示：
当我们在浏览器中查看时，该图片可以正常显示，但是，在使用其他工具来处理该文件时，可能会出现找不到该图片的情况。此时，我们可以使用 gulp-add-missing-post-images-cli 来自动为我们添加所有缺少的图片。
首先，我们需要创建一个 gulpfile.js 文件，并添加以下代码：
-- -------------------- ---- -------
--- ---- - ----------------
--- -------------------- - --------------------------------------------
----------------------- -------- -- -
------ -----------------------------
----------------------------
------------- -----------
------- ---------
---
-----------------------------
---然后，在终端中运行以下命令：
gulp add-images
该命令会对所有在 ./posts 目录下的 .md 文件自动添加所需图片。
配置
在上面的代码中，我们可以配置两个参数：
- imagesFolder：需要扫描的图片文件夹地址，默认为 ./assets。
- prefix：图片链接的前缀，默认为 /assets。
我们可以根据实际情况进行配置。
示例
以下为一个示例，假设我们在文章中添加了两张图片，但是缺少一张：
-- -------------------- ---- ------- -- ----- --------- - -- - ---- ----------------------- - -- - ---- ----------------------- - -- - ---- -----------------------
运行 gulp add-images 命令后，我们可以得到以下结果：
-- -------------------- ---- ------- -- ----- --------- - -- - ---- ----------------------- - -- - ---- ----------------------- - -- - ---- ----------------------- --------------------------------- ---- ---------------------- -------------------------------
可以看到，图片 3 被自动补全了。该方法大大简化了我们的操作过程，减少了我们手动查找和添加图片的时间，非常实用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1381e8991b448e6d4d