yeoman + grunt + bower - google i/o rewind sri lanka
TRANSCRIPT
![Page 1: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka](https://reader033.vdocuments.us/reader033/viewer/2022042716/55cd0c8cbb61ebb5098b45df/html5/thumbnails/1.jpg)
Yeoman + Grunt + BowerA better threesome!
![Page 2: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka](https://reader033.vdocuments.us/reader033/viewer/2022042716/55cd0c8cbb61ebb5098b45df/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022042716/55cd0c8cbb61ebb5098b45df/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022042716/55cd0c8cbb61ebb5098b45df/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022042716/55cd0c8cbb61ebb5098b45df/html5/thumbnails/5.jpg)
Let’s get started
![Page 6: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka](https://reader033.vdocuments.us/reader033/viewer/2022042716/55cd0c8cbb61ebb5098b45df/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022042716/55cd0c8cbb61ebb5098b45df/html5/thumbnails/7.jpg)
yo
Install Yeomannpm install -g yo
Install default generatornpm install -g generator-webapp
![Page 8: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka](https://reader033.vdocuments.us/reader033/viewer/2022042716/55cd0c8cbb61ebb5098b45df/html5/thumbnails/8.jpg)
Grunt
Install Gruntnpm install -g grunt-cli
![Page 9: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka](https://reader033.vdocuments.us/reader033/viewer/2022042716/55cd0c8cbb61ebb5098b45df/html5/thumbnails/9.jpg)
Bower
Install Bowernpm install -g bower
![Page 10: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka](https://reader033.vdocuments.us/reader033/viewer/2022042716/55cd0c8cbb61ebb5098b45df/html5/thumbnails/10.jpg)
Let’s start building
![Page 11: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka](https://reader033.vdocuments.us/reader033/viewer/2022042716/55cd0c8cbb61ebb5098b45df/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022042716/55cd0c8cbb61ebb5098b45df/html5/thumbnails/12.jpg)
Let’s dive deep
![Page 13: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka](https://reader033.vdocuments.us/reader033/viewer/2022042716/55cd0c8cbb61ebb5098b45df/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022042716/55cd0c8cbb61ebb5098b45df/html5/thumbnails/14.jpg)
Build distributables
$ grunt build
Makes the dist folderApp is now ready for deployment
![Page 15: Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka](https://reader033.vdocuments.us/reader033/viewer/2022042716/55cd0c8cbb61ebb5098b45df/html5/thumbnails/15.jpg)
Thank you
Session by Raveen Harith Perera & Milindu Sanoj Kumarage
Google I/O Rewind 2015 Sri Lanka