YEOMAN WORKFLOW INTRODUCTION TO
AGENDA Introduction
Overview Yeoman
• Yo • Bower • Grunt
Demo
INTRO
WHO AND WHAT
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
WHAT JavaScript projects are getting bigger
Better tools are needed Tools enable workflows
Yeoman is a workflow
OVERVIEW
WHAT IS YEOMAN
YEOMAN WORKFLOW
Create a new webapp Handle dependencies Preview, test, build
$ yo webapp $ bower search jquery $ bower install jquery
$ grunt server $ grunt test $ grunt
STRUCTURE
OS
Env
App
STRUCTURE
OS
Env
App
package.json
PACKAGE.JSON
PROJECT STRUCTURE bower_components/
node_modules/ bower.json
Gruntfile.js
package.json
PROJECT STRUCTURE bower_components/ Don’t commit these folders
node_modules/ bower.json
Gruntfile.js
package.json
PROJECT STRUCTURE bower_components/
node_modules/ bower.json Commit these files
Gruntfile.js
package.json
YEOMAN
THE BIG THREE
YO - WHAT Scaffolding
Opinionated Generators (over 180 available)
Sub-generators
YO - WHY Automate tedious configuration
Quickly set up a project structure Start with boilerplate code
Perfect if you like starting projects
YO - HOW
$ npm install -g yo
# will install Bower and Grunt too!
$ npm search yeoman-generator
$ npm install -g generator-angular
~/myproj $ yo angular
BOWER - WHAT npm for front-end libraries
Dependency-management bower.json (`bower init`)
.bowerrc
BOWER - WHY It’s a package manager!
Freedom from google+copy+paste Lock version
Distribution
BOWER - HOW
$ npm install -g bower
~/myproj $ bower init
~/myproj $ bower install jquery --save
# save-flag updates bower.json
BOWER - HOW
$ npm install -g bower
~/myproj $ bower init
~/myproj $ bower install jquery --save
# save-flag updates bower.json
Yo
BOWER.JSON
.BOWERRC
GRUNT - WHAT JavaScript task runner
Tasks (over 1000 available) Gruntfile.js
package.json (‘npm init’)
GRUNT - WHY CLI
No more custom Makefiles Over a thousand existing tasks
Unified workflow
Automation
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
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
GRUNTFILE.JSON
DEMO If we had more time…
…we would work backwards.
YO $ yo
$ yo angular
# Check output log
# Check out structure
$ yo angular:directive myDirective
GRUNT $ grunt test
$ grunt server
$ grunt build
BOWER $ bower list
$ bower install underscore –save
$ bower list
QUESTIONS?
Top Related