Some time ago in the Orinoco project package manager Bower was abandoned in favour of Composer because cloud company Pagodabox could not handle it. Forget about Pagodabox and re-introduce Bower and while we are at it: Grunt. Additional requirement: the whole process stream should be able to differentiate between development (concatenation) and production (concatenation and minifying).

Windows10 users best use Powershell (). Git Bash is having issues with reading json files.

Check if nmp is installed:

npm -v

Use npm to install Bower

npm install -g bower

Create the bower.json file after answering some questions following:

bower init

Then install the required libraries

bower install bootstrap#3.x --save
bower install jquery#2.x --save

This results in a bower.json file with key dependencies listing

"dependencies": {
 "bootstrap": "3.x",
 "jquery": "2.x"
 },

The libraries are stored in the bower_components folder in the document root.  Eventually its content should be moved to a directory in the public space. This is where Grunt comes in.

Install the Grunt command-line interface:

npm install grunt-cli -g

run

npm init

to generate a package.json file

In it define the dependencies. Grunt is expected to concatenate and additionally in production to minify, which in Grunt country is called uglify.

 "dependencies": {
 "grunt": "0.4.2",
 "package.json": "*",
 "grunt-contrib-uglify": "*"
 },
 "devDependencies": { 
 "grunt-contrib-concat": "*" 
 },

Then run for production:

npm install --production

or

npm install

for development

The requested libraries are stored in the node_modules folder.

The tasks Grunt is asked to perform are described in a Gruntfile.js file. In this demo we want to concatenate the bootstrap and jQuery javascript files to a single orinoco.js file. Additionally in a production environment the file should be minified to a orinoco.min.js file

In development run

Grunt

In production run

grunt --env=production

For de source code see the Orinoco project at Github.

 

 

Advertisements