如果你是前端开发，你一定对 CSS 很熟悉。CSS 是前端开发的一项非常重要的技能，但是在项目中，你可能会遇到需要自动化处理 CSS 的需求。这时候，grunt-rework 就派上用场了。
grunt-rework 是一个由 CSS 预处理器 rework 编写的 grunt 插件。这个插件可以帮助你自动化地处理 CSS，让你在项目中更高效地工作。
在这篇文章里，我们将详细介绍 grunt-rework 的使用方法，并提供一些实用的示例代码。
安装 grunt-rework
在开始使用 grunt-rework 之前，我们需要先安装它。通过 npm，我们可以很容易地安装 grunt-rework。
首先，在你的项目根目录下，创建一个 package.json 文件，输入以下内容：
-- -------------------- ---- -------
-
------- -------------
---------- --------
--------------- - --
------------------ -
-------- ---------
--------------- ---------
---------------------- --------
-
-这里我们同时安装了 grunt-contrib-watch，这是一个 grunt 插件，可以帮助我们监视文件改变并执行相应任务。
接下来，运行以下命令安装依赖：
npm install
完成后，我们可以看到项目目录下的 node_modules 文件夹中已经安装了 grunt-rework 插件。
配置 grunt-rework
安装好 grunt-rework 后，我们需要进行一些配置，使其能够正常工作。
首先，在项目根目录下创建一个 Gruntfile.js 文件，在文件中添加以下内容：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
------- -
-------- -
-------- --
--
----- -
------ --
-
--
------ -
------- -
------ --------------
------ ----------
-
-
---
------------------------------------------
-----------------------------------
----------------------------- ---------- ----------
--这里我们先定义了一个 rework 任务，用于编译 CSS，同时指定了任务执行的插件和输出目录。我们还为项目添加了一个 watch 任务，用于监视文件改变并执行相应任务。
接下来，我们需要为 rework 任务添加插件。例如，我们可以添加以下插件：
- rework-npm - 支持在 CSS 中引入 npm 包。
- rework-vars - 支持在 CSS 中使用变量。
- rework-color-function - 提供了更强大的颜色函数。
我们可以在 Gruntfile.js 文件中找到 options.plugins，将需要的插件添加到数组中：
options: {
plugins: [
require('rework-npm')(),
require('rework-vars')(),
require('rework-color-function')()
]
},好了，现在 grunt-rework 的配置已经完成了。
使用 grunt-rework
我们已经完成了 grunt-rework 的安装和配置，现在我们可以开始使用它来编译 CSS 了。
首先，在项目目录下创建一个 src 文件夹，在文件夹中创建一个 test.css 文件。在 test.css 文件中，我们可以添加以下内容：
-- -------------------- ---- ------- ------- ---------------- ----------- ----- ------------------ -------- ---- - ---------- ----------- ----------------- ------------------ -
这里我们使用了 rework-npm 插件来引入了 normalize.css。我们还使用了 rework-vars 插件定义了两个变量，并使用了它们来设置 html 元素的字体大小和背景颜色。
接下来，在命令行中运行以下命令：
grunt
执行完成后，我们可以在项目目录下的 dist 文件夹中找到编译后的 CSS 文件。
这里我们可以看到，grunt-rework 已经帮我们自动化地处理了 test.css 文件中的内容，将它们编译为了一份可用的 CSS 文件。
示例代码
如果你想要查看更多的 grunt-rework 示例，可以参考下面的代码。
配置文件：Gruntfile.js
-- -------------------- ---- -------
-------------- - --------------- -
------------------
------- -
-------- -
-------- -
-------------------------
----------------------------------
-
--
----- -
------ -
----------------- ---------------
-
-
--
------ -
------- -
------ --------------
------ ----------
-
-
---
------------------------------------------
-----------------------------------
----------------------------- ---------- ----------
--样式文件：src/style.css
$font-size: 16px;
$primary-color: #007bff;
html {
font-size: $font-size;
background-color: lighten($primary-color, 50%);
}这里我们使用了 rework-vars 和 rework-color-function 插件，定义了两个变量，并使用了 lighten 函数设置了 html 元素的背景颜色。
在命令行中运行 grunt 命令，grunt-rework 将自动编译 style.css 并输出至 dist/style.css 文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedf33b7a6cc516fbab6de0