Lets' yo

A stack to bootstrap your project's prototyping or whatever you will see.

Transcript

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