压缩 CSS
最小化处理或 压缩是指去除所有不必要的字符，例如空格、换行、注释，同时不改变源代码的功能。 在开发和调试过程中，这些字符有助于提高代码可读性。 在生产阶段，这些字符只会增加需传输的代码体积。
压缩通常作为构建流程中的一个步骤完成，例如使用 webpack 等工具。 如果未使用构建工具，您可以使用独立工具，例如 CSSO 或 cssnano。
要自动压缩代码，您需要安装压缩工具并配置一个 File Watcher ，以便跟踪文件变更并运行压缩工具。
默认情况下，一旦 File Watcher 所监视范围内的 CSS 文件发生更改并保存，压缩就会启动。 您可以指定其他 触发工具运行的事件。 详细信息，请参阅 File Watcher。
生成的压缩代码存储在一个单独文件中，该文件以源 CSS 文件名命名，并使用扩展名 min.css 。 生成文件的位置在 要刷新的输出路径 字段中定义，该字段位于 新建监视器对话框 中。 但在 项目树 中，压缩后的文件显示在源 CSS 文件之下，源文件作为节点显示。 如需更改此默认显示方式，请在 项目 工具窗口中 配置文件嵌套 Alt+1。
以下示例展示如何直接在 WebStorm 中使用 CSSO 压缩 CSS 代码。
示例：使用 CSSO 压缩 CSS
要自动压缩代码，需安装 CSSO 并配置一个 CSSO File Watcher ，以跟踪文件变更并运行该工具。
默认情况下，一旦 File Watcher 所监视范围内的 CSS 文件发生更改并保存，压缩就会启动。 您可以指定其他 触发 CSSO 的事件。 详细信息，请参阅 File Watcher。
生成的压缩代码存储在一个单独文件中，该文件以源 CSS 文件名命名，并使用扩展名 min.css 。 生成文件的位置在 要刷新的输出路径 字段中定义，该字段位于 新建监视器对话框 中。 但在 项目树 中，压缩后的文件显示在源 CSS 文件之下，源文件作为节点显示。 如需更改此默认显示方式，请在 项目 工具窗口中 配置文件嵌套 Alt+1。
开始之前
全局安装 csso-cli
在嵌入式 终端 （Alt+F12 ）中键入：
npm install -g csso-cli
创建 CSSO 文件监视器
在 设置 对话框中（Ctrl+Alt+S ），点击 文件监视器 ，位于 工具 下方。 打开的 File Watcher 页面会显示已配置的 File Watcher 列表。
点击
或按 Alt+Insert ，并从列表中选择 CSSO CSS 优化器 预定义模板。
将打开 新建监视器 对话框。
在 程序 字段中指定
csso可执行文件的位置。如果您是通过 Node Package Manager 安装的
csso-cli，WebStorm 会自动定位该包并使用csso别名自动填充字段；否则，请手动输入路径或单击
，在打开的对话框中选择文件位置。请接受默认的 File Watcher 设置，或根据 文件监视器 中的说明重新配置。
在此示例中，默认值如下：
在 参数 字段中为
-i $FileName$ -o $FileNameWithoutExtension$.min.css。在 要刷新的输出路径 字段中为
$FileNameWithoutExtension$.min.css。在 工作目录 字段中为
$FileDir$。
单击 确定 返回 文件监视器 页面，新建的 File Watcher 已添加到列表中：
请确保已选中 已启用 复选框。
默认情况下，File Watcher 会在当前项目中可用。 如需在其他项目中使用，请在 级别 列表中选择 全局。