Yeoman Workflow

  • Published on

  • 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.


<ul><li>1.YEOMAN WORKFLOW INTRODUCTION TO </li></ul> <p>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? </p>