CODEWITHSUNDEEP
csssassphpstormjetbrains-ide
bmoneruxui
bmoneruxui

Reputation: 313

PHPStorm File Watchers SCSS to Prefixed and Compressed CSS File

I'm making the move from Coda to PHPStorm. I like it, however I need some help with setting up a custom CSS workflow.

Currently I have a file watcher converting my .scss into .css on every save. However I'm not sure how to go about also getting it to set up auto vendor prefixing and CSS compression. I'd like it to be so that:

Can anyone walk me through this?

Upvotes: 3

Views: 4383

Answers (2)

KatieK
KatieK

Reputation: 13863

Sass is already pretty good at compression. Just execute your Sass compilation with a --style flag liked compressed. Ex:

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

If you must handle the prefixing through PHPStorm, you'll need to look into their build tool Phing: http://www.jetbrains.com/phpstorm/webhelp/phing-build-tool-window.html

However, Compass (http://compass-style.org/install/) (a Sass add-on) has a large ecosystem of add-ons, one of which is AutoPrefixer: https://github.com/ai/autoprefixer#compass - a post-processor which adds the vendor-specific prefixes to CSS.

Upvotes: 2

LazyOne
LazyOne

Reputation: 165473

The best way would be to create a shell/batch script that would do all required steps (file name it will receive as a parameter) and use that script in File Watcher instead of your current SCSS compiler.

Instead of shell/batch script you can write a grunt (or similar automation tool) task and call it in file watcher.

Another option is to create separate file watchers for each step, place them in correct order (from top to bottom). They will be executed one after another.

Problem is -- the "Immediate file synchronization" option must be checked in each of such file watchers .. otherwise only first one will be fired. Other will be fired as well .. but on second invocation only.

The negative side of that option is that file watcher will be executed within 1 second after you type any character -- it will not wait until you click "Save".

Upvotes: 3

Related Questions