I love LESS! However having to run lessc every time I edit my less file is LAME! Adding File watchers in PHPStorm means that when you save your file, it will automatically compile your CSS! We are also going to add Javascript and CSS minification, which helps increase page load speeds and also make it harder for nosey people to examine your javascript! Lets go!

First up, lets install node.js by visiting http://nodejs.org/
Next, we install less and yuicompressor:

npm install -g less
 npm install -g yuicompressor

Also on Windows, everything cracks up unless you add a PATH environment variable for the modules. In Control Panel in System, click Advanced System Settings, click Environment Variables and add the node modules folder to the PATH variable, or add it if its not there:

C:\Users\your.username\AppData\Roaming\npm

Go to File > Settings, and under the project settings look for File Watchers. Click the green + to add a watcher. Select LESS.

All that is required is that you put the correct path into the program field. This may be slightly different depending on your setup. For windows users, the modules can usually be found in :

C:\Users\your.username\AppData\Roaming\npm\lessc.cmd
 C:\Users\your.username\AppData\Roaming\npm\yuicompressor.cmd

And on linux machines, you can find it elsewhere. I cant remember offhand, but just take note of the output while you are installing it and you wont go far wrong.

Now you can edit the head section of your website, replacing style.css with style.min.css, and the same also for your javascript! Awesome 🙂

Advertisements