在前端开发中，经常需要对颜色进行处理，colormin 是 npm 上一款可以压缩或提取颜色的包，可以很好的帮助我们对网页中的颜色进行管理和优化。
安装和使用
你可以使用以下命令在你的项目中安装 colormin：
npm install colormin --save-dev
安装完成后，可以通过以下方式引入并使用 colormin：
const colormin = require('colormin');
const compressed = colormin(cssString);在上面的代码中，我们引入了 colormin 并将一个 css 字符串传入该函数中，返回的结果是压缩后的 css 字符串。
压缩颜色
当我们拥有一些不必要的空格或多余的 0 时，可以使用 colormin 压缩我们的颜色，从而减小我们 CSS 的大小。在 colormin 中，有两种方式可以进行压缩。
1. 压缩所有颜色
在这种方式中，colormin 会遍历你的 CSS，将所有颜色进行压缩，即将 hex 颜色缩写为 3 位，并将 RGB 代码缩写为 6 或 3 位。下面是一个例子：
-- -------------------- ---- ------- -- ------ -- ---- - ------ -------- ----------------- -------- -- --- - -- ----- -- ---- - ------ ----- ----------------- ----- -
将上述代码传入 colormin 中，输出的结果为：
body{color:#f00;background-color:#f00}2. 压缩指定颜色
在有些情况下，我们只想压缩指定的颜色，而不是全部颜色。这时，我们可以使用一个参数，告诉 colormin 去查找并压缩颜色。以下是一个例子：
-- -------------------- ---- ------- -- ------ -- ---- - ------ -------- ----------------- -------- -- --- ------------- --------- -- -- --- - -- ----- -- ---- - ------ ----- ----------------- ----- ------------- --------- -- -- --- -
在上述代码中，我们只对 hex 和 RGB 颜色进行了压缩，rgba 颜色并没有被压缩。我们可以通过以下方式传入压缩代码：
const compressed = colormin(cssString, {preserve: ['rgba']});以上代码的第二个参数告诉 colormin 只压缩 hex 和 RGB 颜色，不会压缩 rgba 颜色。
提取颜色
除了压缩颜色，colormin 还可以帮助我们提取颜色。我们可以通过以下方式将 CSS 中的颜色提取出来：
const extracted = colormin(cssString, {extract: true});上述代码中，第二个参数告诉 colormin 提取 CSS 中的颜色。
在提取后，colormin 会返回一个对象，其中包含了提取到的所有颜色和它们对应的使用次数：
{
"#f00": 2,
"#0f0": 1,
"#00f": 1,
"rgba(255,255,255,0.4)": 1
}通过上述例子，我们可以看到提取后的对象包含四个颜色以及它们在 CSS 中的使用次数。这个功能可以帮助我们更好的管理我们的颜色。
结语
在本篇文章中，我们介绍了 colormin 的基本使用方法，包括压缩和提取颜色。colormin 可以帮助我们在前端开发中更好地管理和优化我们的颜色，在节省带宽和提高网站性能方面有着很好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/colormin