This document discusses automating frontend development using Yeoman, Grunt, and Bower. It recommends using Yeoman to scaffold a webapp, Bower to manage dependencies, and Grunt for tasks like serving the app, minifying files, and building for deployment. Key tools and commands are provided to get started, including installing Yeoman and related generators globally, generating a new webapp, installing dependencies with Bower, and using Grunt tasks like serving and building the app.

1. AUTOMATED
FRONTEND DEVELOPMENT
let’s yo

2. Tin Aung Lin
DevOps Engineer at NEX

3. What Are We Going To AUTOMATE ?
• Dependencies Injection
• Media Optimisation
• Code Optimisation
• Deployment Automation

4. Three Tools*|+ = one STACK

5. yeoman: the scaffolding tool
grunt : the task runner
bower : the package manager
Links*
1. http://yeoman.io/
2.http://gruntjs.com/
3.http://bower.io/

6. NODE PACKAGES
$ npm install -g yo
$ npm install -g grunt-cli
$ npm install -g bower

7. YOEMAN GENERATORS

8. WEB APP
https://github.com/yeoman/generator-webapp
$ npm install -g generator-webapp

9. $ mkdir ~/study/yeoman
$ cd ~/study/yeoman
$ yo webapp —skip-install
START

10. BOWER
*yeoman generate a bower.json
*manage dependencies without any pain
$ bower install --save angular
$ grunt wiredep

11. GRUNT TASKS
*yeoman generate a Gruntfile.js
*default tasks
grunt serve - to run the app in an endpoint [ http://localhost:9000 ]
grunt build - include a lot of sub tasks like cssmin/htmlmin/imagemin and opts out a simple
html/css web-app with dependencies injected under bower_components/*

12. DIST/*
Your web app is ready to be deployed.

13. THANKS