在前端开发中，CSS 是一种常用的样式语言。然而，CSS 代码往往会非常冗长，其中包含了大量的注释信息。虽然注释对于代码的可读性和维护性有帮助，但是当需要将 CSS 代码压缩、混淆或优化时，这些注释可能就显得多余了。这时候，我们可以使用 postcss-discard-comments 这个 npm 包来去除 CSS 中的注释。
安装
安装 postcss-discard-comments 包可以通过 npm 命令行工具进行：
npm install postcss-discard-comments --save-dev
使用
要使用 postcss-discard-comments 包，我们需要先引入它，然后将其作为 postcss 的一个插件进行配置。
-- -------------------- ---- -------
----- ------- - -------------------
----- --------------- - ------------------------------------
----- --- - -
-- --- --
---- -
-- --- --
------- --
-------- --
-
-- --- --
--
-- -- ------- -- --- --
----------------------------
-------------
------------ -- -
------------------------
---上面的代码演示了如何使用 postcss-discard-comments 包去掉 CSS 中的注释。首先，我们用 postcss 将 CSS 文件处理成 AST（Abstract Syntax Tree）格式；然后，我们将 postcss-discard-comments 包作为插件传递给 postcss；最后，我们使用 postcss 处理这个 AST 并输出最终的 CSS 代码，其中注释已经被去掉了。
配置
postcss-discard-comments 包的配置比较简单，只需要将其作为 postcss 的一个插件传递即可：
postcss([discardComments()])
如果你希望保留一部分注释信息，可以在调用 discardComments() 时传递一个对象参数，并设置 preserve 属性，该属性接受一个布尔值或一个正则表达式。通过设置 preserve 的值，你可以指定哪些注释信息需要保留下来。
postcss([
discardComments({
preserve: /^!/
})
])上面的代码会保留以感叹号开头的注释信息，其他的注释则被删除。
示例
下面是一个完整的例子，该例子演示了如何使用 postcss-discard-comments 包去除 CSS 中的注释，并将处理后的 CSS 代码写入一个新的文件中：
-- -------------------- ---- -------
----- -- - --------------
----- ------- - -------------------
----- --------------- - ------------------------------------
----- --------- - ------------
----- ---------- - -------------
-- ------
----- ----- - -------------------------- --------
-- -- ------- -- --- --
----------------------------
---------------
------------ -- -
-- ----- --- --------
---------------------------- ------------
---使用上面的代码，你可以将 input.css 文件中的注释去除，并将处理后的 CSS 代码写入 output.css 文件中。
结论
在前端开发中，CSS 是一种常用的样式语言。然而，CSS 代码往往会非常冗长，其中包含了大量的注释信息。如果需要将 CSS 代码压缩、混淆或优化时，这些注释可能就显得多余了。要去除 CSS 中的注释信息，我们可以使用 postcss-discard-comments 这个 npm 包。在使用时，只需要将其作为 postcss 插件传递即可。同时，我们也可以通过配置 preserve 属性来保留部分注释信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43495