PHPStorm文件监视器SCSS到前缀和压缩的CSS文件

时间:2014-05-16 02:04:11

标签: css sass phpstorm jetbrains-ide

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

目前我有一个文件观察程序在每次保存时将.scss转换为.css。但是我不知道如何设置自动供应商前缀和CSS压缩。我希望如此:

  • 我保存.scss
  • 它写入.css
  • .css会运行类似-prefix-free
  • 的内容
  • .css然后进行压缩

有人可以带我走过这个吗?

2 个答案:

答案 0 :(得分:3)

最好的方法是创建一个可执行所有必需步骤的shell /批处理脚本(它将作为参数接收的文件名),并在File Watcher 中使用该脚本< / strong>您当前的SCSS编译器。

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


另一个选择是为每个步骤创建单独的文件监视器,按正确顺序(从上到下)放置它们。它们将一个接一个地执行。

问题是 - &#34;立即文件同步&#34;必须在每个文件监视器中检查选项..否则只会触发第一个。其他也将被解雇..但仅限第二次调用。

该选项的消极方面是文件观察者将在您键入任何字符后1秒内执行 - 它不会等到您点击&#34;保存&#34;。

答案 1 :(得分:2)

Sass已经非常擅长压缩。只需使用标有compressed的样式标志执行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的特定前缀。