压缩 CSS
缩小化或 压缩是指移除所有不必要的字符，如空格、新行、注释，而不改变源代码的功能。 在开发和调试过程中，这些字符使代码更易读。 在生产阶段，它们只会增加需要传输的代码量。
最常见的是，压缩是作为构建过程中使用 webpack 之类工具的一个步骤来完成的。 如果您不使用构建工具，您可以使用独立工具，例如 CSSO 或 cssnano。
要自动压缩您的代码，您需要安装一个压缩工具并配置一个 File Watcher ，该工具将跟踪您的文件更改并运行压缩工具。
默认情况下，CSS 文件在 File Watcher 的作用范围内被更改并保存时，会立即开始压缩。 您可以指定其他 触发工具的事件。 请了解更多有关 File Watchers的信息。
生成的压缩代码存储在一个单独的文件中，该文件的名称为源 CSS 文件的名称和扩展名 min.css 。 此生成文件的位置在 刷新输出路径 字段中定义，位于 新观察器对话框内。 但是，在 项目树 中，包含压缩代码的文件显示在源 CSS 文件下方，源 CSS 文件显示为一个节点。 要更改此默认显示方式，请在 Project 工具窗口 Alt+1 中 配置文件嵌套。
下面的示例显示了如何使用 CSSO 直接从 RubyMine 压缩您的 CSS 代码。
示例：使用 CSSO 压缩 CSS
要自动压缩您的代码，您需要安装 CSSO 并配置一个 CSSO File Watcher ，它将跟踪文件更改并运行该工具。
默认情况下，CSS 文件在 File Watcher 的作用范围内被更改并保存时，会立即开始压缩。 您可以指定其他 events that invoke CSSO。 请了解更多有关 File Watchers的信息。
生成的压缩代码存储在一个单独的文件中，该文件的名称为源 CSS 文件的名称和扩展名 min.css 。 此生成文件的位置在 刷新输出路径 字段中定义，位于 新观察器对话框内。 但是，在 项目树 中，包含压缩代码的文件显示在源 CSS 文件下方，源 CSS 文件显示为一个节点。 要更改此默认显示方式，请在 Project 工具窗口 Alt+1 中 配置文件嵌套。
开始之前
请确保您的计算机上安装了 Node.js。
请确保在设置中启用了 CSS 插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 请点击 已安装 选项卡。 在搜索字段中，输入 CSS。 有关插件的更多信息，请参阅 插件管理。
安装并启用 File Watchers插件，在 设置 | 插件 页面， Marketplace 选项卡中，如 从 JetBrains Marketplace 安装插件中所述。
全局安装 csso-cli
在嵌入的 终端 (Alt+F12 )中，输入：
npm install -g csso-cli
创建 CSSO File Watcher
在 设置 对话框（Ctrl+Alt+S ）中，点击 File Watchers 下的 工具。 File Watchers 页面 显示了已配置的 File Watchers 列表。
点击
或按 Alt+Insert 并从列表中选择 CSSO CSS 优化器 预定义模板。
新监视器 对话框将打开。
请在 程序 字段中指定
csso可执行文件的位置。如果您通过
csso-cliNode Package Manager 安装，RubyMine 将自动定位包并使用csso别名自动填写字段。否则，请手动输入路径或点击
并在打开的对话框中选择文件位置。接受默认的文件监视器设置，或根据需要按照 File Watchers 中的描述重新配置它们。
在此示例中，默认值如下：
-i $FileName$ -o $FileNameWithoutExtension$.min.css位于 参数 字段中。$FileNameWithoutExtension$.min.css位于 刷新输出路径 字段中。$FileDir$位于 工作目录 字段中。
单击 确定 返回到 File Watchers 页面，新文件监视器已添加到列表中：
请确保选中 已启用 复选框。
默认情况下，File Watcher 将在当前项目中可用。 要在其他项目中使用它，请从 全局 列表中选择 级别。