什么是 postcss-clean
Postcss-clean 是一个能够使用 CSS 规则来清除没有用到的 CSS 代码，减小 CSS 文件的体积，提高网页加载速度的工具。它可以与大多数常见的 CSS 预处理器、后处理器及 PostCss 插件组合使用。
安装
在安装之前，确保已经安装好了 Node.js 和 npm，然后在终端执行以下命令：
npm install postcss postcss-cli postcss-safe-parser postcss-clean --save-dev
这样，就可以将 postcss-clean 及其依赖包全部安装到项目中了。
使用
在安装好 postcss-clean 之后，在执行编译命令时，在 postcss 的 plugins 列表中加入 postcss-clean 即可。
举个例子，在一个使用了 autoprefixer 插件的 gulpfile.js 中，将 postcss-clean 加入 plugins 列表中的代码如下所示：
-- -------------------- ---- -------
--- ---- - ----------------
--- ------- - ------------------------
--- ------------ - ------------------------
--- ----- - -------------------------
------------------------- -------- -- -
--- ---------- - -
-------------- --------- ------ - ---------- ---
-------
--
------ -----------------------
--------------------------
---------------------------
---在上面的示例中，我们首先引入了 gulp、postcss、autoprefixer 以及 postcss-clean 模块，然后定义了一个名为 autoprefixer 的任务，任务的执行过程是从 src 目录下的 CSS 文件中读取数据，经过 autoprefixer 插件和 postcss-clean 插件的处理，将结果输出到 dist 目录下。
配置
Postcss-clean 具有非常灵活的配置选项，它可以根据你的预期输出对应的结果。在使用 postcss-clean 时，可以通过传入配置选项来自定义清除 CSS 的粒度和级别。以下为可能用到的配置选项及其含义：
format：配置输出格式，可选值为beautify、compacted、compressed。默认为compressed。level：配置清除的级别，可选值为0~2。默认为1。restructuring：是否对 CSS 结构进行优化，布尔类型。默认为true。skipPreflight：是否跳过 preflight 的步骤，布尔类型。默认为false。shorten：是否缩短 CSS 属性值。布尔类型。默认为false。specialComments：是否保留部分特殊注释。可选值为all、none、import。默认为all。
示例
针对如下的毛玻璃效果代码：
.blur {
width: 500px;
height: 400px;
background: url("../img/blur-bg.jpg") no-repeat center center/cover;
filter: blur(3px);
}通过执行 postcss-clean 后，可以得到以下内容：
.blur {
width: 500px;
height: 400px;
background: url(../img/blur-bg.jpg) no-repeat center center/cover;
filter: blur(3px)
}可以发现，无用的空格已经被去掉了，同时，URL 地址的引号也变成了单引号。
总结
通过使用 postcss-clean 这个工具，我们可以轻松地消除 CSS 代码中的冗余部分，使代码更加的简洁清晰，同时，也能够提高网站的表现速度，从而优化用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56819