PHPStorm 文件观察器 SCSS 到前缀和压缩的 CSS 文件答案

【问题标题】：PHPStorm File Watchers SCSS to Prefixed and Compressed CSS FilePHPStorm 文件观察器 SCSS 到前缀和压缩的 CSS 文件
【发布时间】：2014-05-16 02:04:10
【问题描述】：

我正在从 Coda 迁移到 PHPStorm。我喜欢它，但是我需要一些帮助来设置自定义 CSS 工作流。

目前我有一个文件观察器，每次保存时都会将我的 .scss 转换为 .css。但是，我不确定如何设置自动供应商前缀和 CSS 压缩。我希望它是这样的：

我保存了 .scss
它写入 .css
.css 会通过类似 -prefix-free 的方式运行
.css 然后进行压缩

谁能帮我看看这个？

【问题讨论】：

标签： css sass phpstorm jetbrains-ide

【解决方案1】：

最好的方法是创建一个外壳/批处理脚本来执行所有必需的步骤（它将作为参数接收的文件名）并在文件观察器中使用该脚本而不是您当前的 SCSS 编译器。

您可以编写一个 grunt（或类似的自动化工具）任务并在文件观察器中调用它，而不是 shell/batch 脚本。

另一种选择是为每个步骤创建单独的文件观察程序，按正确的顺序放置它们（从上到下）。他们将一个接一个地被处决。

问题是 - 必须在每个此类文件观察器中检查“立即文件同步”选项..否则只会触发第一个。其他人也将被解雇..但仅在第二次调用时。

该选项的不利方面是文件监视程序将在您键入任何字符后 1 秒内执行 -- 它不会等到您单击“保存”。

【讨论】：

嗯，我从来没有在 OSX 中创建过 shell/批处理脚本，也没有使用 Grunt 的经验。我回家后会调查此事并报告任何发现。谢谢你。

【解决方案2】：

Sass 已经相当擅长压缩。只需使用compressed 之类的 --style 标志执行 Sass 编译。例如：

sass --watch [your files] --style compressed

如果您必须通过 PHPStorm 处理前缀，则需要查看他们的构建工具 Phing：http://www.jetbrains.com/phpstorm/webhelp/phing-build-tool-window.html

然而，Compass (http://compass-style.org/install/)（一个 Sass 插件）有一个庞大的插件生态系统，其中之一是 AutoPrefixer：https://github.com/ai/autoprefixer#compass - 一个将供应商特定前缀添加到 CSS 的后处理器.

【讨论】：

谢谢。我正在研究这两个答案，希望能有所收获。
这意味着我们不能通过 PhpStorm/WebStorm 中的 File Watcher 来使用 AutoPrefixer？