在前端开发中，样式是非常重要的一个部分。而 stylus 则是一种优秀的 CSS 预处理语言，它提供了很多便于开发者编辑样式的语法特性。在使用 stylus 的时候，如果使用 grunt 来进行构建和自动化打包，那么就需要用到 npm 包 grunt-contrib-stylus。
安装
首先，您需要在项目的根目录下运行以下命令来安装 grunt-contrib-stylus：
npm install grunt-contrib-stylus --save-dev
这将安装最新的 grunt-contrib-stylus 包，并将其作为项目的开发依赖保存在 package.json 文件中。
配置
接下来，在 Gruntfile.js 文件中添加以下配置：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
------- -
-------- -
--------- -----
--
-------- -
------ -
----------------------- ---------------------
-
-
-
---
-------------------------------------------
----------------------------- ------------
--在以上代码中，stylus 是任务名，options 是配置选项，其中 compress 选项用来指定是否压缩 CSS 代码。compile 是任务中的 target，files 属性用来定义源文件和目标文件。
使用
有了以上配置之后，就可以使用以下命令进行 stylus 文件的编译：
grunt stylus
这个命令将会编译所有在配置文件中指定的 .styl 文件，并将编译后的 CSS 文件输出到指定的目录中。
示例代码
为了更好的理解上述内容，以下是一个完整的示例代码：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
------- -
-------- -
--------- -----
--
-------- -
------ -
------------------------ -----------------------
-
-
-
---
-------------------------------------------
----------------------------- ------------
--在以上示例代码中，指定了将 src/styles/style.styl 编译为 dist/styles/style.css，并关闭了 CSS 代码的压缩。
总结
在前端开发中，使用 npm 包 grunt-contrib-stylus 可以帮助开发者更加高效的进行样式的编译和自动化打包。通过本文的介绍和示例，希望可以帮助初学者更好的使用和理解该工具的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64008