在前端开发中，CSS 是一个非常重要的组成部分。为了优化 CSS 的性能和文件大小，我们需要使用工具来压缩它们。其中一种常用的工具是 clean-css，它可以移除 CSS 中的空格、注释和无用代码，并将所有属性压缩为一行。在本文中，我们将介绍如何使用 clean-css 的命令行接口（CLI）版本——clean-css-cli。
安装
首先，需要确保已经安装了 Node.js 和 npm。然后，在命令行中运行以下命令进行安装：
npm install -g clean-css-cli
这会全局安装 clean-css-cli 包，以便我们可以在任何地方使用它。
使用
压缩单个 CSS 文件
使用 clean-css-cli 压缩单个 CSS 文件非常简单。假设我们有一个名为 styles.css 的文件，我们可以通过以下命令来压缩它：
cleancss styles.css -o styles.min.css
这会将 styles.css 压缩为 styles.min.css，并将其保存在同一目录下。
压缩多个 CSS 文件
如果需要压缩多个 CSS 文件，可以将它们的名称作为命令的参数。例如，假设我们有三个文件 styles1.css、styles2.css 和 styles3.css：
cleancss styles1.css styles2.css styles3.css -o bundle.min.css
这会将三个文件的内容合并为一个 CSS 文件，并将其保存为 bundle.min.css。
压缩整个目录
如果需要压缩整个目录中的所有 CSS 文件，可以使用通配符。例如，假设我们有一个名为 css 的目录，其中包含多个 CSS 文件：
cleancss css/*.css -o bundle.min.css
这会将目录中所有 CSS 文件的内容合并为一个文件，并将其保存为 bundle.min.css。
高级选项
除了上述基本用法之外，clean-css-cli 还提供了许多高级选项，以满足更多的需求。以下是一些常用的选项：
-s：禁用源映射（source map）。--compatibility：设置兼容性模式。默认情况下，它是空的，表示不考虑任何特定的浏览器。但是，您可以指定不同的值，如ie7或ie8，以确保生成的 CSS 兼容旧版本的 Internet Explorer。--debug：启用调试模式，输出详细的日志信息。--level：设置优化级别。默认情况下，它是1，表示只进行一些简单的优化。但是，您还可以指定2或advanced等更高的级别，以进行更深入的优化。
例如，以下命令将禁用源映射、启用调试模式和设置优化级别为 advanced：
cleancss styles.css -o styles.min.css -s --debug --level=advanced
总结
使用 clean-css-cli 可以轻松地压缩 CSS 文件，从而提高网站性能并减小文件大小。在本文中，我们介绍了 clean-css-cli 的基本用法和一些高级选项。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54399