Yeoman + Grunt + BowerA better threesome!

by Raveen Harith Perera & Milindu Sanoj Kumarage

YeomanOpen source - client side - development stack

Helps developers to kick start building high quality web apps

Scaffolding tool - generates boiler plates with libraries

Runs as a command line interface written in - nodejs

Yeoman.io Yeoman was released at Google I/O 2012.

GruntA Javascript Task Runner - Automation tool

The less work you have to do when performing repetitive tasks like● Minification● Compilation● Unit testing

the easier your job becomes.

Gruntjs.com

BowerA package manager, works by ● Fetching and installing packages● Taking care of hunting, finding● Downloading, and saving

the stuff you’re looking for.

Bower keeps track of these packages in a manifest filebower.json

Bower.io

Let’s get started

nodejs & npm

Windowsnodejs.org/ - download and install

Linux sudo apt-get install nodejs

sudo apt-get install npm

yo

Install Yeomannpm install -g yo

Install default generatornpm install -g generator-webapp

Grunt

Install Gruntnpm install -g grunt-cli

Bower

Install Bowernpm install -g bower

Let’s start building

Go to your desired project folder and run - $ yo

Choose the generator as webapp

Run $ grunt serve and watch the magic

Build the default web-app

Let’s dive deep

Manage with BowerGet a package

$ bower install <package-name>

Get and save dependency in bower.json

$ bower install <package-name> -S

See all dependencies

$ bower list

Build distributables

$ grunt build

Makes the dist folderApp is now ready for deployment

Thank you

Session by Raveen Harith Perera & Milindu Sanoj Kumarage

Google I/O Rewind 2015 Sri Lanka