在前端开发中，文件监控是必不可少的一项工作。而 chokidar-cli 是一个基于 Node.js 的命令行工具，可以方便地监控文件变化并执行指定命令。本文将介绍如何使用 chokidar-cli 进行文件监控。
安装 chokidar-cli
首先需要安装 chokidar-cli。打开命令行终端，输入以下命令：
npm install -g chokidar-cli
这会在全局环境中安装 chokidar-cli。
使用 chokidar-cli
chokidar-cli 的基本用法如下：
chokidar <glob pattern> -c "<command>"
其中，<glob pattern> 表示要监控的文件路径匹配模式，例如 ./src/**/*.js 表示监控 src 目录下所有子目录中的 .js 文件；<command> 表示文件变化后要执行的命令，例如 npm run build 表示执行 npm 脚本中的 build 命令。
下面以监控 CSS 文件并实时编译为例进行说明。
首先，在项目根目录下创建一个 styles 目录，并在其中创建一个 style.css 文件，并添加以下代码：
body {
background-color: #f0f0f0;
}然后，在命令行中进入到项目根目录，并执行以下命令：
chokidar "styles/**/*.css" -c "npm run build:css"
这表示监控 styles 目录下所有子目录中的 .css 文件，当文件变化时执行 npm 脚本中的 build:css 命令。
接着，在 package.json 中添加以下代码：
{
"scripts": {
"build:css": "postcss styles/style.css -o dist/style.css"
}
}这表示执行 postcss 命令编译 CSS 文件，并将输出文件保存在 dist 目录中。
现在，在命令行中打开另一个终端窗口，并进入到项目根目录下的 styles 目录，执行以下命令：
echo "body { background-color: #f0f0f0; } h1 { color: red; }" > style.css这会向 style.css 文件中写入一些 CSS 代码。可以看到，在第一个终端窗口中会输出类似以下内容的信息：
[CHOKIDAR] Change detected: styles\style.css [CHOKIDAR] Running 'npm run build:css'...
这表示 chokidar-cli 监测到了文件变化并执行了相应的命令。可以在 dist/style.css 文件中查看编译后的 CSS 代码。
深入学习
除了基础用法外，chokidar-cli 还提供了更多的参数和选项，例如：
-i, --ignore <pattern>：忽略匹配到的文件。-b, --binary：监控二进制文件。-d, --depth <depth>：指定递归深度。--delay <ms>：设置延迟时间，避免频繁执行命令。--silent：关闭日志输出。
可以通过 chokidar -h 命令查看所有可用的选项和参数。
指导意义
使用 chokidar-cli 可以方便地实现文件监控并自动执行指定命令，使得开发工作更加高效。当需要在开发过程中频繁编译、打包、测试等操作时，chokidar-cli 能够帮助我们自动化这些步骤，减少手动操作的时间和错误率。
示例代码
下面是一个完整的示
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/42325