1. 简介
grunt-topcoat 是一个能够自动生成 topcoat 样式文件的 grunt 插件，它将 topcoat 的原始样式文件编译成 CSS 文件，在应用中方便地使用。同时，它还支持自定义 topcoat 样式，以及压缩和优化生成的 CSS 文件，使得应用的性能得到进一步提升。
2. 安装和配置
2.1 安装
在安装 grunt-topcoat 之前，需要先安装 node.js 和 grunt。
$ npm install -g grunt-cli
$ npm install grunt-topcoat --save-dev
2.2 配置
在使用 grunt-topcoat 前，需要做一些配置：
- 配置 grunt
首先，在项目根目录中创建一个名为 gruntfile.js 的文件，用于配置 grunt。在文件中加入以下内容：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
-------- -
-------- -
-------- ----
--
------ -
------------- -------------
-
-
---
------------------------------------
----------------------------- -------------
--这里我们使用了 less 文件来定义样式，同时生成 CSS 文件，其中 styles.less 是 less 文件的路径，styles.css 是生成 CSS 文件的路径。除此之外，gruntfile.js 文件还需要加载 grunt-topcoat 依赖和设置默认任务（在本例中默认任务是生成 topcoat 样式）。
- 配置 topcoat
在配置 topcoat 前，需要先安装 topcoat，可以从 这里 下载 topcoat 的 zip 包并解压。然后在项目的根目录中创建一个名为 topcoat.json 的文件，用于指定 topcoat 的路径和样式定义：
-- -------------------- ---- -------
-
--------- -
------- -----------------------
------------ ------------------
--
--------- -----------------------
--------- -
------- ------------------
------------ -------------------
--------- ---------------------
--
--------- ----
-上面的代码中，source 属性指定了 topcoat 的原始文件路径和变量文件路径，output 属性指定了生成的 topcoat 样式文件的路径，custom 属性用于定义自定义样式的路径和生成的文件名，minify 决定了是否压缩生成的 CSS 文件。
3. 使用
在配置完成后，现在可以使用 grunt-topcoat 生成样式了。在项目根目录中运行以下命令：
$ grunt
然后，就会在 styles.css 和 custom.css 中生成相应的样式文件。
4. 示例
这是一个简单的 topcoat 样式定义：
@import "lib/topcoat/less/topcoat-color-light.less";
@topcoat-content-item-background: @topcoat-button-background-color;
@topcoat-content-item: {
background-color: @topcoat-content-item-background;
padding: 1em;
}可见，通过 less 定义变量，然后使用变量构建样式，topcoat 样式的定义显得非常简洁。将这段代码保存为 styles.less 文件，然后使用 grunt-topcoat 自动生成样式文件即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedd8713274792b0316f295