yeoman workflow
DESCRIPTION
An introduction to Yeoman, Yo, Bower, and Grunt. Tools every JavaScript developer should know. Presentation given on Sthlm.js on the 3rd September 2013.TRANSCRIPT
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?