Correct workflow for setting up a file watcher: Less compiler > Minify CSS > Upload minified CSS

Hi,

PHPStorm v8 user here.

I'm starting to wrap my head around using file watchers, and I've successfully been able to implment a less compiler :)

The part I'm struggling with is how to intergrate multiple file watchers to do the following:

- Less compiler
- Minify the CSS file that the less compiler generates
- Upload the minified CSS file automatically when I "Save" any changes to the less file (I'm familar with the deployment options in PHPstorm, so no need to detail those steps).

I was hoping someone might know of a good resource that details how I set up this process, which I assume must be a fairly common process for most front end developers. Many of the resources I've read / watched don't quite cover all the steps that I require, and also assume a certain level of expertise on the subject (Which I'm still aquiring).

Thanks in advance

1 comment
Comment actions Permalink

Hi there,

- Less compiler
- Minify the CSS file that the less compiler generates

LESS can already minify generated CSS code

-x parameter will do standard compression
--clean-css will do a bit more advanced minification -- requires less-plugin-clean-css package to be installed additionally (similarly to LESS compiler itself -- via npm)

- Upload the minified CSS file automatically when I "Save" any changes to the less file

I hope you are uploading to dev/test server and not production this way?

In any case: make sure that you provide correct path to generated file in "Output paths to refresh" filed of your File Watcher settings -- otherwise IDE may not notice that generated file was updated. If it still does not see changes/new content in generated file -- use manual refresh (File | Synchronize).

-----

If you need to chain multiple watchers to process the same file (or result generated on a previous step) -- just order watchers in correct order -- they are executed from top to bottom.

P.S. I have not used multiple/chained watchers myself .. so cannot confirm how well it actually works.

0

Please sign in to leave a comment.