Frontend stuff Node.js, NPM, Bower & Gulp

NodeJS

On the latest version of Ubuntu, you can simply:

sudo apt-get install nodejs nodejs-dev npm which will install nodejs and npm to your computer.

Create new folder to play with. CD to that folder

Create file named: "hello_node.js"

insert:

// hello_node.js
var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello Node.js\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

Run the command by typing node hello_node.js in your terminal and leave it open.

Now, if you navigate to http://127.0.0.1:8124/ in your browser, you should see the helloworld message.

Bower init & NPM init

Install bower and gulp globally with command:

npm install -g bower

npm install -g gulp

Now we have bower and gulp globally installed. Make a new folder for your project and go in to that folder. Then do

npm init

Which will launch generator for package.json. When you have set all stuff correctly accept it. Now you can use

npm install command which will install all the required modules. To get more modules do

npm install bower --save-dev which will install bower to your project and --save-dev will put bower to package.json file as dev dependency. You can also use bare --save which will then appear as dependency. 

After you have install bower, run command bower init which will trigger bower.json file to be created. Now you can install bower components by running command bower install bootstrap --save which will install bootstrap under bower components folder. 

Flags --save means that the module is a dependecy for your project. Without that, it can't work. Or may work but not correctly. Setting flag --save-dev means that the module is critical for developer but not necessary in production version.

Gulp

Gulp is meant to automate and enhance you workflow. You can basically set tasks for gulp and it will do all the things for you automatically. First add some dev dependencies for our project.

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

Then create empty file named gulpfile.js

And now for the lazy part. Head over here to read about the gulpfile. Very well explained: http://www.sitepoint.com/introduction-gulp-js/