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
Please sign in to leave a comment.
Hi there,
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)
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.