简介
Gobble-Stylus 是一个基于 Node.js 平台的 NPM 包，主要用于编译 Stylus 预处理器的样式表。它能够实现快速编译，支持自定义插件和配置，非常适合前端开发人员进行网站和移动应用开发。
安装
在使用 Gobble-Stylus 之前，首先需要在终端命令行中进行安装。
npm install gobble-stylus --save-dev
使用
编写 Gobblefile.js
在 Gobble-Stylus 中，需要编写 Gobblefile.js 文件进行配置和插件设置。下面是一个简单的示例：
-- -------------------- ---- ------- ----- ------ - ------------------ ----- ------ - ------------------------- ----- -------- - ------ ----- --------- - ------- ----- ------- - - --------- ---- -- ----- --- - ---------------- --------------------------- ------------------- -------------- - ----
上面的代码中，首先需要引入两个模块，分别是 gobble 和 gobble-stylus。接着定义了输入和输出目录，以及 Stylus 的配置选项。最后通过 gobble-transform 进行插件转换，添加样式表文件后移动到输出目录。
编写样式文件
接下来就可以在指定的输入目录中创建 Stylus 样式表，例如 src/main.styl。
body background-color #EFEFEF font-family "Open Sans", sans-serif h1 font-size 32px color #222
运行 Gobblefile.js
运行 Gobblefile.js 代码使用以下命令：
gobble build
如果一切正常，将会在 dist 目录下生成编译后的 CSS 文件，例如：
body{background-color:#EFEFEF;font-family:"Open Sans",sans-serif;}h1{font-size:32px;color:#222;}自定义插件
Gobble-Stylus 将每个样式表文件作为单独的构建单元进行处理。这意味着开发人员可以很容易地为每个样式表添加自定义插件。
例如，可以使用 postcss 插件将生成的 CSS 进行进一步优化。只需要在 Gobblefile.js 文件中引入 postcss 和其相关插件即可。
-- -------------------- ---- ------- ----- ------ - ------------------ ----- ------ - ------------------------- ----- ------- - -------------------------- ----- ------------ - ------------------------ ----- ------- - ------------------- ----- -------- - ------ ----- --------- - ------- ----- ------- - - --------- ---- -- ----- --- - ---------------- --------------------------- ----------------------------------- ------------ ------------------- -------------- - ----
总结
在本文中，我们详细介绍了如何安装和使用 Gobble-Stylus 包来编译 Stylus 样式表。还演示了如何自定义插件以更好地优化生成的 CSS。希望这篇文章对广大前端开发者的学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e70255dee6beeee746d