• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sthlm.js 2013: Yeoman workflow
 

Sthlm.js 2013: Yeoman workflow

on

  • 988 views

An introduction to Yeoman, Yo, Bower, and Grunt. Tools every JavaScript developer should know.

An introduction to Yeoman, Yo, Bower, and Grunt. Tools every JavaScript developer should know.

Presentation given on Sthlm.js on the 3rd September 2013.

Statistics

Views

Total Views
988
Views on SlideShare
988
Embed Views
0

Actions

Likes
7
Downloads
24
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Sthlm.js 2013: Yeoman workflow Sthlm.js 2013: Yeoman workflow Presentation Transcript

    • YEOMAN WORKFLOW INTRODUCTION TO
    • AGENDA Introduction Overview Yeoman •  Yo •  Bower •  Grunt Demo
    • WHO AND WHAT INTRO
    • 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
    • WHAT IS YEOMAN OVERVIEW
    • 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 App Env OS
    • STRUCTURE App Env OS package.json
    • PACKAGE.JSON
    • PROJECT STRUCTURE bower_components/ node_modules/ bower.json Gruntfile.js package.json
    • PROJECT STRUCTURE bower_components/ node_modules/ bower.json Gruntfile.js package.json Don’t commit these folders
    • PROJECT STRUCTURE bower_components/ node_modules/ bower.json Gruntfile.js package.json Commit these files
    • THE BIG THREE YEOMAN
    • 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 Yo ~/myproj $ bower install jquery --save # save-flag updates bower.json
    • 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 Yo ~myproj $ npm install grunt --save-dev # requires package.json available ~myproj $ npm install grunt-contrib-qunit --save-dev ~myproj $ grunt
    • 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?