Learning Yeoman

上QQ阅读APP看书，第一时间看更新

Yo – generators

What makes Yeoman amazing are the generators. There is a robust set of templates (commonly referred to as generators) for any type of project. Finding a generator to install and use is quite simple as well; just use the npm search generator-[name] command to search for a generator where the name matches.

The Yeoman workflow

The general workflow to follow when using Yo, Bower, and Grunt is as follows:

Install a generator as follows:
```
$ npm install generator-[name]
```
Scaffold a project:
```
$ yo [generator] [args] [options]
```

Install a dependency:

$ bower install [dependency#version] [options]

Test the project:
```
$ grunt test
```
Preview the project:
```
$ grunt serve
```
Build the project for deployment:
```
$ grunt
```

Official generators

Here is a list of the official generators maintained by the Yeoman team. Use these as a base to create a custom generator or to create a project:

polymer: This is a generator used to create Polymer webapps and components
chromeapp: This is a generator used to create a Google Chrome application
jquery: This is a generator used to create a custom jQuery library
gruntfile: This is a generator used to create a basic Gruntfile
commonjs: This is a generator used to create a CommonJS module, including nodeunit unit tests
nodejs: This is a generator used to create a Node.js module, including nodeunit unit tests

Other generators include webapp, angular, backbone, ember, jasmine, karma, mocha, bootstrap, mobile, gruntplugin, and chrome-extension.

Note

For more information on official generators, visit http://goo.gl/mYhTgw.

The generator-webapp

The generator-webapp is the webapp generator for Yeoman that scaffolds a generic web application, including unit testing.

Features

The generator-webapp has some great features worth noting, which include the following:

It automatically wires up Bower components with the bower-install task
It provides Mocha or Jasmine unit testing with PhantomJS
It contains Twitter Bootstrap for Syntactically Awesome Stylesheets (SASS)
It provides an optimized Modernizr build

Installing the generator-webapp

To use this generator, all that is required is the module installation. This is easily done with the Node package manager (npm). To install it, use the following command:

$ npm install -g generator-webapp

Note

The -g flag requires an administrator user.

Using the generator-webapp

The following is how the generator-webapp is invoked from the command line:

$ yo webapp [name] [options]

Options

The webapp generator has the following options available:

Note

These options are applied during the initial project's scaffold.

Example usage

To use the generator, simply open a terminal and execute the following:

$ yo webapp hello-webapp

The preceding command will scaffold a new webapp project with the name hello-webapp.

You will be prompted to answer some questions that the generator asks, such as whether to:

Use SASS with Compass
Include Twitter Bootstrap
Include Modernizer

After answering these questions, the project files are created, the dependencies are downloaded and installed into the bower_components directory, and the application is ready to preview.

Previewing

To run the application, you can use the following command to start the server and open a default web browser that displays the application:

$ grunt serve

On opening, your default web browser should display a page similar to the following screenshot:

Conclusion

Typically, one will want to consider using the webapp generator when looking to create a scaffold out of a simple website that can be easily deployed to Heroku or another cloud application server for hosting.

The generator-angular

This is the AngularJS generator for Yeoman, which quickly scaffolds a new project with sensible defaults and community best practices. This is one of the most popular generators in the community, with more forks and stars on Github than any other.

Features

Some notable features that the generator-angular includes are as follows:

It is based on the angular-seed project
It includes ngCookies, ngSanitize, ngResource, and ngRoute modules
It includes Twitter Bootstrap with or without SASS
It provides full CoffeeScript support

Installing the generator-angular

The following command is used to install the AngularJS generator:

$ npm install -g generator-angular

Note

The -g flag requires an administrator user.

Using the generator-angular

This is how to use this new generator:

$ yo angular[:subgenerator] [args] [options]

Options

The following options are available when invoking the generator-angular:

Example usage

The following is an example of using the generator to create a new AngularJS application:

$ yo angular hello-angular

The preceding command will invoke the generator with the application name set to hello-angular.

Angular subgenerators

The following subgenerators are provided with the generator-angular; all of the subgenerators listed as follows can run independently:

angular:app: The angular or angular:app command is used to create the initial AngularJS application. This is shown in the following code:
```
$ yo angular:app [name]
```
angular:common: The angular:common subgenerator is used to create the general default files used for an AngularJS application. This is shown in the following code:
```
$ yo angular:common [name]
 create app/scripts/services/[name].js
```
angular:constant: The angular:constant subgenerator is used to create a module that is available during the configuration and run phases of the application's life cycle, which Angular cannot override. This is shown in the following code:
```
$ yo angular:constant [name]
 create app/scripts/services/[name].js
 create test/spec/services/[name].js
```
angular:decorator: The angular:decorator subgenerator is used to create a decorator module that can be used to intercept the creation of a service, allowing methods to be overridden or modified during the configuration phase of the services' life cycle. This is shown in the following code:
```
$ yo angular:decorator [name]
```
angular:directive: The angular:directive subgenerator is used to create an Angular directive. This module allows you to create reusable view components for the application. This is shown in the following code:
```
$ yo angular:directive [name]
 create app/scripts/directives/[name].js
 create test/spec/directives/[name].js
```
angular:factory: The angular:factory subgenerator is used to create an Angular factory. This module can be used to create reusable pieces of the application logic. This is shown in the following code:
```
$ yo angular:factory [name]
 create app/scripts/services/[name].js
 create test/spec/services/[name].js
```
angular:main: The angular:main subgenerator is used to create the main Angular module used to Bootstrap an Angular application and configure the router. This is shown in the following code:
```
$ yo angular:main [name]
```
angular:provider: The angular:provider subgenerator is used to create an Angular provider module used to expose an API for application-wide configuration that must be made before the application starts. This is shown in the following code:
```
$ yo angular:provider [name]
```
angular:route: The angular:route subgenerator is used to create an Angular view template and controller, and add a route to the application's router. This module allows you to handle the routes for the application. This is shown in the following code:
```
$ yo angular:route [name]
 create app/scripts/controllers/[name].js
 create test/spec/controllers/[name].js
 create app/views/[name].html
```
angular:service: The angular:service subgenerator is used to create an Angular service module. This module allows you to create reusable business logic for the application. This is shown in the following code:
```
$ yo angular:service [name]
 create app/scripts/services/[name].js
 create test/spec/services/[name].js
```
angular:value: The angular:value subgenerator is used to create an Angular value module. This module allows you to define simple objects or strings for the application. This is shown in the following code:
```
$ yo angular:value [name]
```
angular:view: The angular:view subgenerator is used to create an Angular view template. This template allows you to use AngularJS directives and data-binding syntax to display data from the controllers' scope.
```
$ yo angular:view [name]
 create app/views/[name].html
```

Previewing

To run the application, you use the serve task to start the preview server, which opens a default web browser that displays the application; append :dist to start the server in the distribution mode. For example, to run the application execute the following command:

$ grunt serve

After running the command, your default web browser should display a page similar to the following screenshot:

This is the example running in serve mode; the watch task is running in the background, enabling changes to LiveReload upon save; give it a try and modify the source file.

Conclusion

The generator-angular is a great generator used to create new AngularJS projects that are already preconfigured to build, test, and run with minimal effort for the developer.

The generator-backbone

The Backbone.js generator for Yeoman provides a functional boilerplate application out of the box. It includes access to a number of subgenerators that can be easily used to create individual models, views, collections, and routers.

Features

Some notable features that the generator-backbone includes are as follows:

Require.js (AMD) support
Full CoffeeScript support
R.js build optimization of all AMD modules (the Require.js option)
Unit testing with PhantomJS

Installing the generator-backbone

The following is the command used to install the Backbone.js generator for Yeoman:

$ npm install -g generator-backbone

Note

The -g flag requires an administrator user.

Using the generator-backbone

The following shows how to use this new generator:

$ yo backbone[:subgenerator] [args] [options]

Options

Here are the options available when invoking the Backbone generator:

Example usage

Here, you can see an example of using the Backbone.js generator to create a new project:

$ yo backbone hello-backbone

In this command, the backbone generator is invoked with hello-backbone as the application name.

Backbone subgenerators

The following subgenerators are provided with the generator-backbone module:

The backbone:app subgenerator is used to create new Backbone applications. This is shown in the following code:
```
$ yo backbone:app myApp
```

The backbone:all subgenerator is used to create a Backbone model, collection, view, route, and template for the passed parameter. This is shown in the following code:

$ yo backbone:all tags
 create app/scripts/models
 create app/scripts/collections
 create app/scripts/views
 create app/scripts/routes
 create app/scripts/helpers
 create app/scripts/templates

The backbone:model subgenerator is used to create new Backbone models for the application. The Backbone.Model class provides a set of basic methods and events such as change, invalid, destroy, and add to manage changes to data. This is shown in the following code:
```
$ yo backbone:model post
 create app/scripts/models/post.coffee
```
The backbone:collection subgenerator is used to create new Backbone collections for the application. The Backbone.Collection class is an ordered set of models and has methods to manage collections of model data. This is shown in the following code:
```
$ yo backbone:collection posts
 create app/scripts/collections/posts.coffee
```
The backbone:view subgenerator is used to create new Backbone views for the application. The Backbone.View class provides an organized structure to add custom event handlers that model data and the logic in the view. They render to display the model or collect data. This is shown in the following code:
```
$ yo backbone:view posts
 create app/scripts/templates/posts.ejs
 create app/scripts/views/posts.coffee
```
The backbone:router subgenerator is used to create new Backbone routers for the application. The Backbone.Router class provides a set of methods for handling the routing in a client-side web application by connecting (#/route) routes to actions and methods.
```
$ yo backbone:router posts
 create app/scripts/routes/posts.coffee
```

Previewing

To run the application, you can use the grunt serve task command to start the preview server and open a default web browser that displays the application; append :dist to the view in the production mode. This is shown in the following code:

$ grunt serve

The following screenshot is the hello-backbone example that runs in the serve mode. This is the default layout that is created during the initial scaffold:

Conclusion

The best way to get started with Backbone applications is definitely to use the generator-backbone Yeoman generator. It takes all the pain out of creating a new Require.js Backbone application, with unit testing and R.js optimized build configuration already set up.

The generator-ember

The generator-ember generator handles creating Ember applications; it is based on the Ember.js starter app as the base application.

Features

Some notable features that the generator-ember includes are as follows:

Optional CoffeeScript support
Unit testing with Karma and PhantomJS
Jasmine or Mocha test framework

Installing the generator-ember

This is how to install the Ember.js generator for Yeoman:

$ npm install -g generator-ember

Using the generator-ember

To use the generator, simply open a console and execute the following:

$ yo ember [name] [options]

Options

These are the options available when invoking the Ember generator:

Example usage

Here, you can see an example that uses the Ember.js generator to create a new application:

$ yo ember hello-ember

In this command, the ember generator is invoked with hello-ember as the app name.

You will be prompted with some questions that the generator asks. After you have answered the questions, and the installation of the project dependencies is complete, you can then preview your new application by running it.

Ember subgenerators

The subgenerators that the Ember generator includes are as follows:

The ember:app subgenerator is used to create the initial Ember application. The Ember.Application class helps to instantiate, initialize, and coordinate the objects in the app. This is shown as follows:
```
$ yo ember:app myApp
```
Each Ember project has one and only one Ember.Application. This object is created during the initial scaffold of the generator and is the name of the project's folder.

The ember:model subgenerator is used to create a new Ember model. The DS.Model class is an object that stores a persisted state; templates use models to display data to the user. This is shown as follows:

$ yo ember:model book
 create app/scripts/models/book_model.js
 create app/scripts/controllers/books_controller.js
 create app/scripts/controllers/book_edit_controller.js
 create app/scripts/routes/books_route.js
 create app/scripts/routes/book_route.js
 create app/scripts/routes/book_edit_route.js
 create app/scripts/views/book_view.js
 create app/scripts/views/book_edit_view.js
 create app/scripts/views/books_view.js
 create app/templates/book.hbs
 create app/templates/book/edit.hbs
 create app/templates/books.hbs
 create app/scripts/router.js

The ember:router subgenerator is used to create a new Ember router. The Ember.Router class manages the application state and URLs. This is shown as follows:
```
$ yo ember:router books
 create app/scripts/router.js
```

The ember:view subgenerator is used to create a new Ember view. The Ember.View class manages the combining of model data with templates and responds to user events. This is shown as follows:

$ yo ember:view library
 create app/scripts/views/library_view.js
 create app/scripts/views/library_edit_view.js
 create app/scripts/views/libraries_view.js
 create app/templates/library.hbs
 create app/templates/library/edit.hbs
 create app/templates/libraries.hbs

Previewing

To run the application, you can use the following command to start the server and open a default web browser that displays the application; you can use the serve:dist task to the view in the production mode:

$ grunt serve

On opening, your default web browser should display a page that looks similar to the following screenshot:

Conclusion

The Ember.js generator is built off the ember-app boilerplate and is a great start for development. Something worth noting is that the subgenerators always generate CRUD-type application files and do not allow much customization. Further features are on the road map, which will hopefully solve some of these issues.