stylus-chokidar 是一个基于 NodeJS 平台的 npm 包，它提供了一种简便的方式让前端开发者在项目中使用 stylus 预处理器。它的主要特点是实时编译 styl 文件，节省了手动编译的时间，提高了开发效率。本文将介绍 stylus-chokidar 的基本用法和常用命令，帮助读者快速掌握这个 npm 包的使用技巧。
基本用法
首先，我们需要在项目目录下安装 stylus-chokidar 包。在终端中输入以下命令：
npm install stylus-chokidar --save-dev
接着，在项目根目录下创建一个名为 stylus 的文件夹，并在其中创建一个名为 index.styl 的文件。打开 index.styl 文件，添加以下内容：
body {
background-color: #FFF;
}我们将该 CSS 样式编写在 index.styl 文件中，而非 index.css，这是因为 stylus-chokidar 会自动检查并编译 .styl 后缀的文件，生成对应的 .css 文件。接着，在终端中输入以下命令：
npx stylus-chokidar stylus -w -u nib
这是一个常用的 stylus-chokidar 命令，它表示在 stylus 文件夹下监视 .styl 文件的变化，并在变化时自动编译。其中，stylus 是指 stylus 文件夹的路径，-w 表示监视文件的变化，-u 表示引用 nib 库提供的 CSS 样式函数和变量。
接下来，打开浏览器，调用 index.css 文件中的样式（本例中即 body 标签的背景颜色），可以看到修改 index.styl 文件即可实时更新样式。
常用命令
除了基本用法外，stylus-chokidar 还有许多常用命令，以便更好地满足开发者的需求。我们将介绍其中一些常用命令：
- 监视目录变化：
npx stylus-chokidar stylus -w - 编译 stylus 文件：
npx stylus-chokidar file.styl - 编译 stylus 文件到指定路径：
npx stylus-chokidar file.styl -o dist - 编译 stylus 文件，同时监听变化：
npx stylus-chokidar file.styl -w - 使用 nib 库提供的 CSS 样式函数和变量：
npx stylus-chokidar file.styl -u nib
除此之外，stylus-chokidar 还支持一些高级选项，例如：
- 设置输出文件的格式：
npx stylus-chokidar file.styl --compress - 设置需要引用的 CSS 文件路径：
npx stylus-chokidar file.styl -I dir - 自定义编译方式：
npx stylus-chokidar file.styl --use my-plugin
以上是常用的 stylus-chokidar 命令，它们可以为开发者提供更好的灵活性和开发效率。
结语
本文介绍了 npm 包 stylus-chokidar 的基本用法和常用命令，帮助前端开发者更好地使用该包实现 stylus 预处理器和样式表自动编译。尽管 stylus-chokidar 对于新手来说可能有些复杂，但通过学习和练习，开发者便能快速掌握其使用技巧，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7e81e8991b448d9082