Download as PDF, PPTX
Uploaded byJohn-Philip Johansson
Yeoman Workflow
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.
More Related Content
Yeoman Workflow
- 1.
- 2.
- 3.
- 4. JOHN-PHILIP “JP” JOHANSSON UXDeveloper @ 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 aregetting bigger Better tools are needed Tools enable workflows Yeoman is a workflow
- 6.
- 7. YEOMAN WORKFLOW Create anew webapp Handle dependencies Preview, test, build $ yo webapp $ bower search jquery $ bower install jquery $ grunt server $ grunt test $ grunt
- 8.
- 9.
- 10.
- 11.
- 12. PROJECT STRUCTURE bower_components/ Don’tcommit these folders node_modules/ bower.json Gruntfile.js package.json
- 13. PROJECT STRUCTURE bower_components/ node_modules/ bower.json Committhese files Gruntfile.js package.json
- 14.
- 15. YO - WHAT Scaffolding Opinionated Generators(over 180 available) Sub-generators
- 16. YO - WHY Automatetedious 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 npmfor front-end libraries Dependency-management bower.json (`bower init`) .bowerrc
- 19. BOWER - WHY It’sa 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.
- 23.
- 24. GRUNT - WHAT JavaScripttask runner Tasks (over 1000 available) Gruntfile.js package.json (‘npm init’)
- 25. GRUNT - WHY CLI Nomore 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.
- 29. DEMO If we hadmore time… …we would work backwards.
- 30. YO $ yo $ yoangular # 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.