yeoman + grunt + bower - google i/o rewind sri lanka

15
Yeoman + Grunt + Bower A better threesome!

Upload: google-developer-group-sri-lanka

Post on 14-Aug-2015

796 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka

Yeoman + Grunt + BowerA better threesome!

Page 2: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka

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.

Page 3: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka

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

Page 4: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka

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

Page 5: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka

Let’s get started

Page 6: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka

nodejs & npm

Windowsnodejs.org/ - download and install

Linux sudo apt-get install nodejs

sudo apt-get install npm

Page 7: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka

yo

Install Yeomannpm install -g yo

Install default generatornpm install -g generator-webapp

Page 8: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka

Grunt

Install Gruntnpm install -g grunt-cli

Page 9: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka

Bower

Install Bowernpm install -g bower

Page 10: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka

Let’s start building

Page 11: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka

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

Page 12: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka

Let’s dive deep

Page 13: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka

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

Page 14: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka

Build distributables

$ grunt build

Makes the dist folderApp is now ready for deployment

Page 15: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka

Thank you

Session by Raveen Harith Perera & Milindu Sanoj Kumarage

Google I/O Rewind 2015 Sri Lanka