Tuesday, October 15, 2013

Compile LESS CSS files and compress/minify CSS and JS files using node.js

Here is what you need to do, in order to

- compile your LESS files into CSS whenever they are changed and also compress those CSS files into .min.css (*1)

- compress your JS files into .min.js whenever they are changed

The 2 scripts described here will automatically perform the above actions upon invocation and will then also set up a file-watcher on the specified directory.

But first:
- Download and install node.js from here.

- Download and install uglifyjs from here, using
npm install uglify-js --global
- Download and install LESS compiler from here, using
npm install less --global

Download this RAR file, which contains all the script files that I have modified, so all you need to do is adjust the contained sample batch file and off you go.

These scripts allow you to specify a source and a target directory.
For LESS/CSS, the LESS file is compiled into CSS in the same directory.
The CSS is then compressed into the target directory.

For JS, the js file is compressed into the target directory.

When you run the batch file, it will scan and process all matching files and then it will stay in the background, monitoring the source directory.

Many thanks to the guys that have created all of the above tools.
The original idea for this was from Jonathan Cheung's code here.

[Blatant plug! See my article about my album on Google Play.]

ps: Comments and/or links to this article are most welcome!