简介
Metalsmith 是一个简单灵活的静态网站生成器。它可以通过插件来配置生成器的功能，同时也可以通过 npm 包的方式扩展其功能。metalsmith-external-watch 就是其中一个npm 包，它可以帮助我们实现同步监测目录外部的文件及文件夹。
安装
metalsmith-external-watch 需要在 Metalsmith 和 chokidar 的基础上运行。因此，我们需要将它们一同安装。
npm install metalsmith metalsmith-external-watch chokidar --save-dev
使用
准备工作
- 初始化 Metalsmith 项目
mkdir my-metalsmith-project cd my-metalsmith-project npm init npm install metalsmith --save-dev
- 创建 Metalsmith 的工作目录和文件
mkdir src touch src/index.html
- 创建 Metalsmith 的配置文件
touch metalsmith.js
-- -------------------- ---- -------
----- ---------- - ---------------------
---------------------
----------------
-----------------------
------------ -- -
-- ----- -
----- ---
-
----------------------- ----- ---------------
--- 运行 Metalsmith
node metalsmith.js
配置准备
在 runner 配置文件中，我们需要将 metalsmith-external-watch 作为一个 Metalsmith 插件引入，并配置其实例参数：
-- -------------------- ---- -------
----- ----------------------- - ------------------------------------
---------------------
----------------
-----------------------
------------------------------
------ -------------------------
---
------------ -- -
-- ----- -
----- ---
-
----------------------- ----- ---------------
--- files：需要监控的外部文件路径和文件夹
现在，metalsmith-external-watch 的配置参数已准备就绪。
示例代码
为了更加直观体现 metalsmith-external-watch 的使用，这里提供一个示例代码，我们使用上述 Metalsmith 配置文件，然后看看如何使用 metalsmith-external-watch 插件：
-- -------------------- ---- -------
----- ---------- - ---------------------
----- ----------------------- - ------------------------------------
---------------------
----------------
-----------------------
------------------------------
------ -------------------------
---
------------ -- -
-- ----- -
----- ---
-
----------------------- ----- ---------------
--通过上述的这个配置文件，我们就可以实现监控目录外指定文件夹或文件。
指导意义
Metalsmith 是一个简单灵活的静态网站生成器，其可以通过插件来配置生成器的功能，metalsmith-external-watch 插件扩展了其监控范围。
metalsmith-external-watch 的作用是使 Metalsmith 在生成网站过程中可以同步检测目录外部的文件或文件夹，可用于配合文档库或 API 文档库的使用，提高开发效率。
使用前要先进行安装并进行配置，由于该插件需要在 Metalsmith 和 chokidar 的基础上运行，所以我们需要一同安装它们三个。
通过本文的学习，你将掌握如何安装并使用 npm 包 metalsmith-external-watch，同时能够了解插件的配置方式，帮助你更好的实现静态网站的快速开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040b95