Yeoman Workflow

download Yeoman Workflow

of 33

  • date post

  • Category


  • view

  • download


Embed Size (px)


An introduction to Yeoman, Yo, Bower, and Grunt. Tools every JavaScript developer should know. Presentation given on Sthlm.js on the 3rd September 2013.

Transcript of Yeoman Workflow


2. AGENDA Introduction Overview Yeoman Yo Bower Grunt Demo 3. INTRO WHO AND WHAT 4. JOHN-PHILIP JP JOHANSSON UX Developer @ Avanade Twitter: @seriemajp GitHub: Grunt crusade: Twitter Bootstrap Raphal Holder.js FooTable Upcoming: 5. WHAT JavaScript projects are getting bigger Better tools are needed Tools enable workflows Yeoman is a workflow 6. OVERVIEW WHAT IS YEOMAN 7. YEOMAN WORKFLOW Create a new webapp Handle dependencies Preview, test, build $ yo webapp $ bower search jquery $ bower install jquery $ grunt server $ grunt test $ grunt 8. STRUCTURE OS Env App 9. STRUCTURE OS Env App package.json 10. PACKAGE.JSON 11. PROJECT STRUCTURE bower_components/ node_modules/ bower.json Gruntfile.js package.json 12. PROJECT STRUCTURE bower_components/ Dont commit these folders node_modules/ bower.json Gruntfile.js package.json 13. PROJECT STRUCTURE bower_components/ node_modules/ bower.json Commit these files Gruntfile.js package.json 14. YEOMAN THE BIG THREE 15. YO - WHAT Scaffolding Opinionated Generators (over 180 available) Sub-generators 16. YO - WHY Automate tedious configuration Quickly set up a project structure Start with boilerplate code Perfect if you like starting projects 17. YO - HOW $ npm install -g yo # will install Bower and Grunt too! $ npm search yeoman-generator $ npm install -g generator-angular ~/myproj $ yo angular 18. BOWER - WHAT npm for front-end libraries Dependency-management bower.json (`bower init`) .bowerrc 19. BOWER - WHY Its a package manager! Freedom from google+copy+paste Lock version Distribution 20. BOWER - HOW $ npm install -g bower ~/myproj $ bower init ~/myproj $ bower install jquery --save # save-flag updates bower.json 21. BOWER - HOW $ npm install -g bower ~/myproj $ bower init ~/myproj $ bower install jquery --save # save-flag updates bower.json Yo 22. BOWER.JSON 23. .BOWERRC 24. GRUNT - WHAT JavaScript task runner Tasks (over 1000 available) Gruntfile.js package.json (npm init) 25. GRUNT - WHY CLI No more custom Makefiles Over a thousand existing tasks Unified workflow Automation 26. GRUNT - HOW $ npm install -g grunt-cli ~myproj $ npm init ~myproj $ npm install grunt --save-dev # save flag updates package.json ~myproj $ npm install grunt-contrib-qunit --save-dev ~myproj $ grunt 27. GRUNT - HOW $ sudo npm install -g grunt-cli ~myproj $ npm init ~myproj $ npm install grunt --save-dev # requires package.json available ~myproj $ npm install grunt-contrib-qunit --save-dev ~myproj $ grunt Yo 28. GRUNTFILE.JSON 29. DEMO If we had more time we would work backwards. 30. YO $ yo $ yo angular # Check output log # Check out structure $ yo angular:directive myDirective 31. GRUNT $ grunt test $ grunt server $ grunt build 32. BOWER $ bower list $ bower install underscore save $ bower list 33. QUESTIONS?