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?