Yeoman

http://yeoman.io/codelab/index.html - Let's Scaffold a Web App with Yeoman using Angular - done reading

http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
http://code.tutsplus.com/tutorials/building-apps-with-the-yeoman-workflow--net-33254
http://addyosmani.com/blog/improved-developer-tooling-and-yeoman/
http://blog.teamtreehouse.com/improving-development-workflow-yeoman

http://yeoman.io/
https://github.com/yeoman/grunt-bower-requirejs
https://github.com/stephenplusplus/grunt-wiredep
https://www.youtube.com/watch?v=gKiaLSJW5xI
https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md
https://c9.io/blog/how-to-use-yeoman-on-cloud9/
http://meanjs.org/generator.html
http://yeo-lab.com/
http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/
https://github.com/yeoman/yeoman
https://github.com/yeoman
http://newtriks.com/2013/12/31/automating-react-with-yeoman-and-grunt/
http://www.gauntface.co.uk/blog/2014/02/05/cordova-web-best-practices-v2-0/
http://rhumaric.com/2014/01/building-a-yeoman-generator/
http://blog.pedago.com/2014/01/21/goodbye-sprockets-a-grunt-based-rails-asset-pipeline/
http://updates.html5rocks.com/2014/01/Yo-Polymer-A-Whirlwind-Tour-Of-Web-Component-Tooling
https://speakerdeck.com/anguscroll/stanford
http://www.numediaweb.com/web-app-with-dream-team/
http://www.infragistics.com/community/blogs/ambrose_little/archive/2014/01/28/simple-scaffolding-with-the-ignite-ui-yeoman-generator.aspx
https://docs.google.com/presentation/d/1vO5NlWGjwUpMYlSSpqFnYYimbKvi1l4f-s7c3sbEZZY/edit#slide=id.g2a3cc7a59_74
http://docs.asp.net/en/latest/client-side/yeoman.html - Building Projects with Yeoman (ASP.NET)
http://julian.io/foundation-5-and-yeoman/
https://blog.openshift.com/day-24-yeoman-ember-the-missing-tutorial/

What is Yeoman?

The web's scaffolding tool for modern webapps. Yeoman offer scaffolding for all sort of things, including Angular, Backbone, React, Polymer, etc. Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. Yeoman provides a generator ecosystem. A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts.

Yeoman includes support for linting, testing, minification and much more, so developers can focus on solutions rather than worrying about the little things.

The Yeoman workflow comprises three types of tools for improving your productivity and satisfaction when building a web app: the scaffolding tool (yo), the build tool (Grunt, Gulp, etc) and the package manager (like Bower and npm).

yo scaffolds out a new application, writing your build configuration (e.g Gruntfile, Gulpfile) and pulling in relevant build tasks and package manager dependencies (Bower, npm) that you might need for your build.

The Build System is used to build, preview and test your project. Grunt and Gulp are two popular options.

The Package Manager is used for dependency management, so that you no longer have to manually download and manage your scripts. Bower and npm are two popular options.

These tools are developed and maintained separately, but work well together as part of our prescribed workflow for keeping you effective.

Yeoman can fire up a preview web server and watch your files for edits in order to live reload changes and compile your Sass. Yeoman can also run your unit tests, minimize and concatenate your code, optimize images, plus more!

How can we install Yeoman?

node --version && npm --version
npm install --global npm@latest  // update npm
npm install -g yo
npm install -g yo bower grunt-cli gulp
npm install -g generator-webapp
npm install -g generator-angular
yo --version && bower --version && grunt --version

What is the Yeoman workflow?

The Yeoman workflow is comprised of three core tools for improving your productivity and satisfaction when building a web app. These tools are:

  • yo - the scaffolding tool from Yeoman
  • A package manager, such as bower or npm.
  • A build tool, such as Grunt or Gulp.

Each of these projects are independently maintained by their respective communities, but work well together as a part of a prescriptive workflow for keeping you effective.

How can we use Yeoman?

mkdir my-yo-project
cd my-yo-project
yo webapp  // scaffold a generic web application

The generator-webapp is the default / generic web application generator that will scaffold out a project containing HTML5 Boilerplate, jQuery, Modernizr, and Bootstrap. You'll have a choice during the interactive prompts to not include many of these.

How can we use Yeoman with Angular?

npm install -g generator-angular
mkdir my-yo-project
cd my-yo-project
yo angular  // scaffold an Angular application

Many generators allow you to customize your application by using flags from the initial command. As an example, with generator-angular, you can enter:

yo angular --coffee

Some generators can also be used to scaffold further pieces of your application - we call these sub-generators. In the AngularJS framework, for example, your application is made up of a number of pieces including controllers, directives and filters. You can actually scaffold out any of these pieces (and more) during your development workflow as shown below:

yo angular:controller myController
yo angular:directive myDirective
yo angular:filter myFilter
yo angular:service myService
mkdir mytodo && cd mytodo

As an added bonus, the Angular generator will dynamically use the name of your folder to make a namespace for your app. For example, mytodo will become angular.module('mytodoApp', []).

yo angular

How can we use Bower with Yeoman?

To create a basic web app with a dependency on a jQuery plug-in:

# Search Bower's registry for the plug-in we want.
$ bower search jquery-pjax

# Install it and save it to bower.json
$ bower install jquery-pjax --save

# If you're using RequireJS...
# (be aware that currently the webapp generator does not include RequireJS 
# and the following command only applies to generators that do)
$ grunt bower
# Injects your Bower dependencies into your RequireJS configuration.

# If you're not using RequireJS...
$ grunt wiredep
# Injects your dependencies into your index.html file.

What is Gulp?

Gulp is a task-based command-line tool for JavaScript projects. It can be used to build projects, but also exposes several commands which you will want to use in your workflow. Many of these commands utilize Grunt tasks under the hood which are maintained by the Yeoman team.

How can we use Gulp with Yeoman?

# Preview an app you have generated (with Livereload).
$ gulp serve

# Run the unit tests for an app.
$ gulp test

# Build an optimized, production-ready version of your app.
$ gulp

These commands can be used together with the yo CLI for a seamless development workflow:

yo webapp
$ gulp serve
$ gulp test
$ gulp

What is Grunt?

Grunt is a task-based command-line tool for JavaScript projects. It can be used to build projects, but also exposes several commands which you will want to use in your workflow.

How can we use Grunt with Yeoman?

# Preview an app you have generated (with Livereload).
$ grunt serve

# Run the unit tests for an app.
$ grunt test

# Build an optimized, production-ready version of your app.
$ grunt

These commands can be used together with the yo CLI for a seamless development workflow:

yo webapp
$ grunt serve
$ grunt test
$ grunt

What does 'grunt serve' do?

Create a local, Node-based http server on localhost:9000 (or 127.0.0.1:9000 for some configurations). It will also launch your web browser and open your newly scaffolded application in a new tab.

Open up your favourite text editor and start making changes. Each save will automatically force a browser refresh so you don’t have to do this yourself. This is called live reloading and it’s a nice way of getting a real-time view of your application state.

What is live loading?

After you use 'grunt serve' to start the web server, it will watch your application folder for changes and restart the server if necessary.

Open up your favourite text editor and start making changes. Each save will automatically force a browser refresh so you don’t have to do this yourself. This is called live reloading and it’s a nice way of getting a real-time view of your application state.

Live reloading is made available to your application through a set of Grunt tasks configured in Gruntfile.js; it watches for changes to your files and automatically reloads them if it detects a change.

How can we check what packages we have already installed?

bower list

How can we run our tests?

grunt test

For those unfamiliar with Karma, it is a JavaScript test runner that is test framework agnostic. The Angular generator has two included test frameworks: ngScenario and Jasmine. When we ran yo angular earlier, the generator scaffolded a test directory in the root of the mytodo folder, created a karma.conf.js file, and pulled in the Node modules for Karma.

There is already a Grunt task scaffolded out in our Gruntfile.js for running tests. First, we need to check the Karma configuration to see if it is loading the new Bower components we installed. Open karma.conf.js. Bower has read in the newly added dependencies ('bowercomponents/jquery-ui/jquery-ui.js', 'bowercomponents/angular-ui-sortable/sortable.js') and automatically added them to the karma.conf.js file for you.

You’ll find unit tests scaffolded out in the test folder, so open up test/spec/controllers/main.js. This is the unit test for your Angular MainCtrl controller that we need to modify. Your boilerplate test still references awesomeThings so delete the following test:

it('should attach a list of awesomeThings to the scope', function () {
  expect(scope.awesomeThings.length).toBe(3);
});

And replace that test with the following:

it('should have no items to start', function () {
  expect(scope.todos.length).toBe(0);
});

Open scripts/controllers/main.js. Remove the 3 items we added earlier from the $scope.todos declaration:

$scope.todos = [];

Re-running our tests with grunt test should see our tests now passing.

Your full MainCtrl test script (test/spec/controllers/main.js) should now look like this:

'use strict';

describe('Controller: MainCtrl', function () {

  // load the controller's module
  beforeEach(module('mytodoApp'));

  var MainCtrl,
    scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    MainCtrl = $controller('MainCtrl', {
      $scope: scope
    });
  }));

  it('should have no items to start', function () {
    expect(scope.todos.length).toBe(0);
  });

  it('should add items to the list', function () {
    scope.todo = 'Test 1';
    scope.addTodo();
    expect(scope.todos.length).toBe(1);
  });

  it('should add then remove an item from the list', function () {
    scope.todo = 'Test 1';
    scope.addTodo();
    scope.removeTodo(0);
    expect(scope.todos.length).toBe(0);
  });

});

What does the 'grunt' command do?

It creates a production version of our application, which include:

  • lint our code,
  • run our tests,
  • concatenate and minify our scripts and styles to save on those network requests,
  • optimize images if we were using any,
  • compile the output of any preprocessors we’re using, and
  • generally make our application really lean.
grunt

This command will go through the Grunt tasks and configuration Yeoman has set up for you in Gruntfile.js and create a version of your app we can ship. Give it a minute and you should be presented with a completed build and a report of how long the build took to complete and where time was spent.

Your lean, production-ready application is now available in a dist folder in the root of your mytodo project. These are the files that you can put on your server using FTP or any other deployment service.

How can we preview your production app locally?

grunt serve:dist

It will build your project and launch a local web server.

What else can Yeoman do?

Yeoman supports scaffolding out a lot more for Angular and other frameworks than what we’ve shown today. For example, the Angular generator also supports creating new views, directives and controllers for you. A new controller can be scaffolded by running yo angular:route routeName, which will create your controller files but also update the route in app.js for you. We also try scaffolding out unit tests where possible.

To find out all the Yeoman commands for the Angular generator take a look at the generator readme.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License