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!

PHP, LESS CSS and css/js minify

UPDATE: Link and source updated on 19-apr-2013. See bottom of page


LESS CSS is a pre-processor for CSS that provides lots of added functionality to plain ol' CSS. For more info visit the LESS website.

Here is a brief description of what it does:

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino

There is also a LESS plugin for Netbeans.

CSS and JS minify is the process of compacting CSS and JS files, in order to speed up page loads.

While there are lots of different ways of minifying CSS and JS files, I needed one that was simple to use and that was available on my dev PC.

I have combined a number of tools and have come up with the following solution that:

• compiles LESS files into CSS, if the LESS files are newer than the corresponding CSS.
• minifies the CSS files into .min.css if the CSS files are newer than the .min.css files.
• minifies the JS files into .min.js if the JS files are newer than the .min.js files

The above is achieved by simply visiting a page on the local development PC. Every time the page is visited it executes all of the above.

For PHP projects, the dir structure could be as follows:

- <project root>

- - styles

- - scripts

- - LESS

- - etc

A LESS.INI file specifies which directories to process for JS and whcich for LESS and CSS.

The LESS directory contains the compile.php, lessc.inc.php, cssmin-v3.0.1.php, Minifier.php and LESS.ini files. See download links inside the compile.php  sourcef file.

Compile.php is the one that does all the work.

While developing an app, I have a browser window open that points to

<project root>/LESS/compile.php.

Whenever I refresh it, all of the above actions are executed.

Magic!

Here is a link to the complete source of the version that I use.

Updates

Link and source updated on 19apr2013:
- It also checks inside LESS files for @import statements and uses that to determine if the main LESS file needs to be recompiled.
- The LESS compiler emits more info in error messages


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

Open Source Build Automation and Installer/Wizard Development Toolsets

Below is a list of handy utilities for developing application installers/wizards.

These tools combined can be used to build enterprise grade system configuration applications to automate those tedious deployment and configuration tasks.


Nullsoft Scriptable Install System:


Nullsoft Scriptable Install System (NSIS) is a script-driven Windows installation system with minimal. NSIS has risen to popularity as a widely used alternative to commercial and proprietary products like InstallShield.


http://sourceforge.net/projects/nsis/
http://nsis.sourceforge.net/Category:Plugins




Windows Installer XML - WiX:


The Windows Installer XML (WiX) is a toolset that builds Windows installation packages from XML source code. The toolset supports a command line environment that developers may integrate into their build processes to build MSI and MSM setup packages.


http://zelenkov.com/twix/download/



Build automation/scripting:


Nant
NAnt is a free and open source software tool for automating software build processes. It is similar to Apache Ant, but targeted at the .NET environment rather than Java.


Other:


SuperOrca
An MSI Editor from Microsoft. SuperOrca may be used to examine and modify an MSI database.


Free Windows Installer Designers:
http://www.innosetup.com/isinfo.php
http://www.advancedinstaller.com/features.html