PhpStorm - Combine CSS files before minification using file watcher

Question

I have a project that has some CSS files in different folders and I want to combine them automatically into one final/live file.

During development I want them to be separate. I don't want to use @import inside the css files.

File watchers in PhpStorm sound to me like they should be able to to that. Because I need some GUI.

I'm not comfortable using the command line. But I got YUI Compressor up and running using this step-by-step-guide. This setup compresses all my css files. Not really needed just want to compress one file. I also learned that YUI Compressor can't combine files.

I want the following workflow on file change:

Combine CSS files in the right order into one file
Minify the one CSS file and safe it

Can someone list out:

What node module to install and the command for that
How to configure the file list and order. Any commands for that? File editing?
How to start minification after finishing the combining

PS: If there is any application with a GUI that can do this on file change outside of PhpStorm it would also be an option. (CodePen doesn't support CSS, just SCSS and LESS)

You can setup multiple file watchers -- if they watch the same file(s) they will be executed one after another. As alternative -- create a batch/shell script that does such job (all tasks) and then just use it as File Watcher program. P.S. Have a look at gulp/grunt or any other task/build systems -- they are made for such tasks. IDE supports gulp/grunt -- so you can run their tasks any time you want manually ... or use it as file watcher .. or just use watch module to run them automatically in background outside of IDE. — LazyOne
– LazyOne, Commented Jun 30, 2016 at 12:03

lena · Accepted Answer · 2016-06-30 13:59:18Z

2

I can suggest using Grunt grunt-contrib-cssmin task - it supports merging and minifying files. You can run the tasks using Grunt console (recommended), or configure it as file watcher

answered Jun 30, 2016 at 13:59

lena

94.4k11 gold badges155 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

PhpStorm - Combine CSS files before minification using file watcher

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related