简介
metalsmith-watcher 是一个用于监测 Metalsmith 生成的文件变化的 npm 包。这个包能够实时监测文件的变化，自动运行 metalsmith 插件，并生成新的文件。
Metalsmith 是一个静态网站生成器，它是基于 Node.js 的，用于构建静态网站。Metalsmith 的优点在于它的插件化，即通过安装和配置插件来处理不同的任务，比如读取文件、渲染模板、生成静态网站等。而 metalsmith-watcher 则是使得我们可以更方便地自动化生成网站。
安装
你可以通过以下 npm 命令来安装 metalsmith-watcher：
npm install --save-dev metalsmith-watcher
基本使用
在使用 metalsmith-watcher 之前，需要先了解 Metalsmith 的基本使用方法，以及注册和调用插件的方式。以下示例代码将展示如何使用 metalsmith-watcher 来自动化生成静态网站。
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------- - ------------------------------
---------------------
-- ----
---------------
---------------
---------------
-- -------------
--------------
------ -
----------------- ----
--
----------- ----
---
------------ -- -
-- ----- -
----- ----
-
----------------- ----- ------------
---在这个示例中，我们首先引入了 metalsmith 和 metalsmith-watcher 包。然后，我们创建了一个 Metalsmith 的实例，并添加了需要使用的插件。最后，我们使用了 metalsmith-watcher，通过指定需要监测的文件路径来自动运行这些插件。
高级使用
metalsmith-watcher 还提供了一些高级功能，以让你自定义如何监测文件变化和自动运行插件。
自定义监测路径
你可以通过「paths」选项来自定义需要监测的文件路径。这个选项接受一个对象，我们可以通过添加键值对来指定需要监测的路径和是否需要递归子目录。
.use(watcher({
paths: {
"${source}/css/**/*": true,
"${source}/js/**/*": true,
"${source}/images/**/*": true
}
}))在这个例子中，我们监测了 css、js 和 images 目录下的所有文件，而不是监测整个源代码目录。
使用回调函数
当文件变化时，metalsmith-watcher 会自动运行插件来重新生成网站。你还可以通过「callback」选项来执行额外的回调函数。
-- -------------------- ---- -------
--------------
------ -
----------------- ----
--
--------- ------------- ------ ----------- -
-- ----- -
-----------------
-
----------------- ----- ------------
-
---在这个示例中，我们添加了一个回调函数，当文件变化时，执行了一个简单的输出语句。
启用 livereload
metalsmith-watcher 还提供了一个内置的 livereload 功能，通过选项「livereload」来启用。
.use(watcher({
paths: {
"${source}/**/*": true
},
livereload: true
}))当这个选项为 true 时，metalsmith-watcher 将在生成新的文件之后，使用 livereload 自动刷新浏览器页面。
结论
在本文中，我们简要介绍了 metalsmith-watcher 的基本使用方法，以及如何自定义监测路径、使用回调函数和启用 livereload。希望这篇文章能够帮助你更好地使用 metalsmith-watcher，并自动化生成静态网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f431d8e776d08040e62