Yeoman Workflow
3 likes•1,181 views
This document introduces the Yeoman workflow, which includes tools like Yo, Bower, and Grunt for creating and managing web projects. It outlines the functionality of each tool, including scaffolding, dependency management, and task automation. The overall focus is on how these tools enhance developer efficiency by streamlining project setup and workflow processes.
Yeoman Workflow
- 2. AGENDA Introduction Overview Yeoman • Yo • Bower • Grunt Demo
- 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. WHAT JavaScript projects are getting bigger Better tools are needed Tools enable workflows Yeoman is a workflow
- 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
- 10. PACKAGE.JSON
- 12. PROJECT STRUCTURE bower_components/ Don’t 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
- 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 It’s 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?