My Webapp Workflow

My Webapp Workflow with Yeoman, Grunt and bower.
From Kerala Ruby User Group meetup.

Transcript

1. MY WEBAPP WORKFLOW
2. ABOUT ME Rubyist / JavaScripter Yeoman team member blog.revathskumar.com Twitter/Github - @revathskumar
3. YEOMAN Opinionated stack for web application development
4. IDEA TO PROTOTYPE IN 10 MINUTES
5. WHAT YEOMAN CAN DO 4 U? Create directory structure
6. Boiler plate your code / * g l o b a l d e f i n e * / d e f i n e ( [ ' u n d e r s c o r e ' , ' b a c k b o n e ' ] , f u n c t i o n ( _ , B a c k b o n e ) { ' u s e s t r i c t ' ; v a r T o d o M o d e l = B a c k b o n e . M o d e l . e x t e n d ( { d e f a u l t s : { } } ) ; r e t u r n T o d o M o d e l ; } ) ;
7. Install dependencies
8. Choose only what you needed
9. INSTALL INSTALL YEOMAN $ n p m i n s t a l l - g y o USAGE $ y o b a c k b o n e $ y o b a c k b o n e : m o d e l T o d o $ y o b a c k b o n e : c o l l e c t i o n T o d o s $ y o b a c k b o n e : v i e w I n d e x V i e w $ y o b a c k b o n e : r o u t e r T o d o
10. OTHER HELPS! 1. Install/Run/Update generators
11. GRUNT The JavaScript Task Runner
12. WHY GRUNT? Task runner based on CLI Alternative to Rake/Cake/Make/Jake 100+ plugins Lint, test, concat, watch, min etc .... Customize task as you wish!
13. GRUNTFILE . JS m o d u l e . e x p o r t s = f u n c t i o n ( g r u n t ) { g r u n t . i n i t C o n f i g ( { u g l i f y : { d i s t : { f i l e s : { " d i s t / s c r i p t s / a p p . j s " : " a p p / s c r i p t s / * . j s " } } } , c l e a n : [ ' d i s t / * ' ] , } ) ; g r u n t . l o a d N p m T a s k s ( " g r u n t - c o n t r i b - u g l i f y " ) ; g r u n t . l o a d N p m T a s k s ( " g r u n t - c o n t r i b - c l e a n " ) ; g r u n t . r e g i s t e r T a s k ( ' b u i l d ' , [ ' c l e a n ' , ' u g l i f y ' ] ) ; }
14. TASKS $ g r u n t c l e a n $ g r u n t u g l i f y $ g r u n t b u i l d OTHER TASKS l i n t , t e s t , l i v e r e l o a d , c o p y , c o m p i l e t e m p l a t e s
15. BOWER Package manager for the web
16. MANAGE YOUR PACKAGES/DEPENDECIES FROM CLI
17. FLOW Create boilerplate code with yo Install dependencies with bower Start grunt server Compiles coffeescipt Compiles sass/scss open page in default web browser live reload
18. grunt lint grunt test grunt build jslint, run tests concat and minify your dependencies copy assets to dist dir
19. YEOMAN Twitter : Github : GRUNTJS Twitter : Github : BOWER Twitter : Github :
20. QUEST