Download - Yeoman Workflow

Transcript
Page 1: Yeoman Workflow

YEOMAN WORKFLOW INTRODUCTION TO

Page 2: Yeoman Workflow

AGENDA Introduction

Overview Yeoman

•  Yo •  Bower •  Grunt

Demo

Page 3: Yeoman Workflow

INTRO

WHO AND WHAT

Page 4: Yeoman Workflow

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

Page 5: Yeoman Workflow

WHAT JavaScript projects are getting bigger

Better tools are needed Tools enable workflows

Yeoman is a workflow

Page 6: Yeoman Workflow

OVERVIEW

WHAT IS YEOMAN

Page 7: Yeoman Workflow

YEOMAN WORKFLOW

Create a new webapp Handle dependencies Preview, test, build

$ yo webapp $ bower search jquery $ bower install jquery

$ grunt server $ grunt test $ grunt

Page 8: Yeoman Workflow

STRUCTURE

OS

Env

App

Page 9: Yeoman Workflow

STRUCTURE

OS

Env

App

package.json

Page 10: Yeoman Workflow

PACKAGE.JSON

Page 11: Yeoman Workflow

PROJECT STRUCTURE bower_components/

node_modules/ bower.json

Gruntfile.js

package.json

Page 12: Yeoman Workflow

PROJECT STRUCTURE bower_components/ Don’t commit these folders

node_modules/ bower.json

Gruntfile.js

package.json

Page 13: Yeoman Workflow

PROJECT STRUCTURE bower_components/

node_modules/ bower.json Commit these files

Gruntfile.js

package.json

Page 14: Yeoman Workflow

YEOMAN

THE BIG THREE

Page 15: Yeoman Workflow

YO - WHAT Scaffolding

Opinionated Generators (over 180 available)

Sub-generators

Page 16: Yeoman Workflow

YO - WHY Automate tedious configuration

Quickly set up a project structure Start with boilerplate code

Perfect if you like starting projects

Page 17: Yeoman Workflow

YO - HOW

$ npm install -g yo

# will install Bower and Grunt too!

$ npm search yeoman-generator

$ npm install -g generator-angular

~/myproj $ yo angular

Page 18: Yeoman Workflow

BOWER - WHAT npm for front-end libraries

Dependency-management bower.json (`bower init`)

.bowerrc

Page 19: Yeoman Workflow

BOWER - WHY It’s a package manager!

Freedom from google+copy+paste Lock version

Distribution

Page 20: Yeoman Workflow

BOWER - HOW

$ npm install -g bower

~/myproj $ bower init

~/myproj $ bower install jquery --save

# save-flag updates bower.json

Page 21: Yeoman Workflow

BOWER - HOW

$ npm install -g bower

~/myproj $ bower init

~/myproj $ bower install jquery --save

# save-flag updates bower.json

Yo

Page 22: Yeoman Workflow

BOWER.JSON

Page 23: Yeoman Workflow

.BOWERRC

Page 24: Yeoman Workflow

GRUNT - WHAT JavaScript task runner

Tasks (over 1000 available) Gruntfile.js

package.json (‘npm init’)

Page 25: Yeoman Workflow

GRUNT - WHY CLI

No more custom Makefiles Over a thousand existing tasks

Unified workflow

Automation

Page 26: Yeoman Workflow

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

Page 27: Yeoman Workflow

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

Page 28: Yeoman Workflow

GRUNTFILE.JSON

Page 29: Yeoman Workflow

DEMO If we had more time…

…we would work backwards.

Page 30: Yeoman Workflow

YO $ yo

$ yo angular

# Check output log

# Check out structure

$ yo angular:directive myDirective

Page 31: Yeoman Workflow

GRUNT $ grunt test

$ grunt server

$ grunt build

Page 32: Yeoman Workflow

BOWER $ bower list

$ bower install underscore –save

$ bower list

Page 33: Yeoman Workflow

QUESTIONS?