Yeoman Workflow

820
-1

Published on

An introduction to Yeoman, Yo, Bower, and Grunt. Tools every JavaScript developer should know.

Presentation given on Sthlm.js on the 3rd September 2013.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
820
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Yeoman Workflow

  1. 1. YEOMAN WORKFLOW INTRODUCTION TO
  2. 2. AGENDA Introduction Overview Yeoman •  Yo •  Bower •  Grunt Demo
  3. 3. INTRO WHO AND WHAT
  4. 4. JOHN-PHILIP “JP” JOHANSSON UX Developer @ Avanade Twitter: @seriemajp GitHub: https://github.com/seriema Grunt crusade: •  Twitter Bootstrap •  Raphaël •  Holder.js •  FooTable Upcoming: http://npmalerts.com
  5. 5. WHAT JavaScript projects are getting bigger Better tools are needed Tools enable workflows Yeoman is a workflow
  6. 6. OVERVIEW WHAT IS YEOMAN
  7. 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. 8. STRUCTURE OS Env App
  9. 9. STRUCTURE OS Env App package.json
  10. 10. PACKAGE.JSON
  11. 11. PROJECT STRUCTURE bower_components/ node_modules/ bower.json Gruntfile.js package.json
  12. 12. PROJECT STRUCTURE bower_components/ Don’t commit these folders node_modules/ bower.json Gruntfile.js package.json
  13. 13. PROJECT STRUCTURE bower_components/ node_modules/ bower.json Commit these files Gruntfile.js package.json
  14. 14. YEOMAN THE BIG THREE
  15. 15. YO - WHAT Scaffolding Opinionated Generators (over 180 available) Sub-generators
  16. 16. YO - WHY Automate tedious configuration Quickly set up a project structure Start with boilerplate code Perfect if you like starting projects
  17. 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. 18. BOWER - WHAT npm for front-end libraries Dependency-management bower.json (`bower init`) .bowerrc
  19. 19. BOWER - WHY It’s a package manager! Freedom from google+copy+paste Lock version Distribution
  20. 20. BOWER - HOW $ npm install -g bower ~/myproj $ bower init ~/myproj $ bower install jquery --save # save-flag updates bower.json
  21. 21. BOWER - HOW $ npm install -g bower ~/myproj $ bower init ~/myproj $ bower install jquery --save # save-flag updates bower.json Yo
  22. 22. BOWER.JSON
  23. 23. .BOWERRC
  24. 24. GRUNT - WHAT JavaScript task runner Tasks (over 1000 available) Gruntfile.js package.json (‘npm init’)
  25. 25. GRUNT - WHY CLI No more custom Makefiles Over a thousand existing tasks Unified workflow Automation
  26. 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. 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. 28. GRUNTFILE.JSON
  29. 29. DEMO If we had more time… …we would work backwards.
  30. 30. YO $ yo $ yo angular # Check output log # Check out structure $ yo angular:directive myDirective
  31. 31. GRUNT $ grunt test $ grunt server $ grunt build
  32. 32. BOWER $ bower list $ bower install underscore –save $ bower list
  33. 33. QUESTIONS?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×