How to install Node.js, CoffeeScript, LESS and Uglify-js on Ubuntu

Node.js Evented I/O for V8 javascript

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Node.js allow basically to run server side JavaScript.

Installation

sudo apt-get update
# python-software-properties is needed to use add-apt-repository
sudo apt-get install python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get install nodejs

Experimenting

Node.js interpreter is available using nodejs -i

nodejs -i
> var foo = 'bar'
> console.log(foo)
bar

For convenience and because dependencies may use node command instead of nodejs, a symbolic link is necessary to avoid having this error:

/usr/bin/env: node: No such file or directory

Add Node symbolic link

sudo ln -s /usr/bin/nodejs /usr/bin/node

NPM Node Packaged Modules

NPM is Node.js package manager. We will use it to install CoffeeScript, Less and Uglify-js during this tutorial.

Installation

sudo apt-get install npm

Basic commands

# Any package can be installed by using
npm install
# Display the package list globally installed
npm list -g

CoffeeScript Little language that compiles into JavaScript

The CoffeeScript compiler is itself written in CoffeeScript, using the Jison parser generator. The command-line version of coffee is available as a Node.js utility. The core compiler however, does not depend on Node, and can be run in any JavaScript environment, or in the browser.

CoffeeScript simplify the way to create great JavaScript code.

Installation

Leave off the -g if you don’t wish to install globally.

# -g specify that you want to install it globally 
# (otherwise it will install it within a local node_modules folder)
sudo npm install -g coffee-script
npm http GET https://registry.npmjs.org/coffee-script
npm http 304 https://registry.npmjs.org/coffee-script
/usr/bin/coffee -> /usr/lib/node_modules/coffee-script/bin/coffee
/usr/bin/cake -> /usr/lib/node_modules/coffee-script/bin/cake
coffee-script@1.6.2 /usr/lib/node_modules/coffee-script

Experimenting

CoffeeScript interpreter is available using coffee -i

coffee -i
coffee> foo = 'bar'
coffee> console.log foo
bar

LESS The dynamic stylesheet language

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

Installation

sudo npm install -g less
npm http GET https://registry.npmjs.org/ycssmin
npm http 200 https://registry.npmjs.org/ycssmin
npm http GET https://registry.npmjs.org/ycssmin/-/ycssmin-1.0.1.tgz
npm http 200 https://registry.npmjs.org/ycssmin/-/ycssmin-1.0.1.tgz
/usr/bin/lessc -> /usr/lib/node_modules/less/bin/lessc
less@1.3.3 /usr/lib/node_modules/less

Experimenting

Less does not have an interpreter. To test it we will create a LESS file and compile it into CSS.

echo "@foo: 25px; #foobar{font-size: @foo};" > style.less 
sudo lessc ./style.less ./style.css
cat style.css 
#foobar {
  font-size: 25px;
}

Uglify-js JavaScript minification

UglifyJS is a JavaScript parser, minifier, compressor or beautifier toolkit.

Installation

sudo npm install -g uglify-js
npm http GET https://registry.npmjs.org/uglify-js
npm http 304 https://registry.npmjs.org/uglify-js
npm http GET https://registry.npmjs.org/uglify-js/-/uglify-js-2.3.4.tgz
npm http 200 https://registry.npmjs.org/uglify-js/-/uglify-js-2.3.4.tgz
npm http GET https://registry.npmjs.org/optimist
npm http GET https://registry.npmjs.org/async
npm http GET https://registry.npmjs.org/source-map
npm http 200 https://registry.npmjs.org/optimist
npm http GET https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz
npm http 200 https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz
npm http 200 https://registry.npmjs.org/source-map
npm http GET https://registry.npmjs.org/source-map/-/source-map-0.1.22.tgz
npm http 200 https://registry.npmjs.org/source-map/-/source-map-0.1.22.tgz
npm http 200 https://registry.npmjs.org/async
npm http GET https://registry.npmjs.org/async/-/async-0.2.8.tgz
npm http 200 https://registry.npmjs.org/async/-/async-0.2.8.tgz
npm http GET https://registry.npmjs.org/wordwrap
npm http GET https://registry.npmjs.org/amdefine
npm http 200 https://registry.npmjs.org/amdefine
npm http GET https://registry.npmjs.org/amdefine/-/amdefine-0.0.5.tgz
npm http 200 https://registry.npmjs.org/wordwrap
npm http GET https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz
npm http 200 https://registry.npmjs.org/amdefine/-/amdefine-0.0.5.tgz
npm http 200 https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz
/usr/bin/uglifyjs -> /usr/lib/node_modules/uglify-js/bin/uglifyjs

Experimenting

Uglify-js does not have an interpreter. To test it we will create a .js file and create a minified version .min.js from it.

touch test.js
echo "var foo = function(prefix){return prefix + ' World'}; console.log(foo('Hello'));" > test.js
# Make sure your code works
node test.js 
# it works!
Hello World
# creates the test.min.js from test.js
# -m, --mangle   :Mangle names/pass mangler options.
# -c, --compress :Enable compressor/pass compressor options.
uglifyjs test.js -mc -o test.min.js
node test.min.js
# it still works!
Hello World
# Display test.min.js content to check out the result of the minification
cat test.min.js
# The compression is not too obvious but
# it removed spaces and renamed the prefix variable
var foo=function(o){return o+" World"};console.log(foo("Hello"));