Yeoman Tutorial: Yeoman Basics

 ·  · 

Quickly know and start to use Yeoman.

 

1 What is Yeoman?

Yeoman is code generator ecosystem. Yeoman take care of generators and use generators to scaffold a project, especially but not limited to web application project. Yeoman generators will create basic code structure with best practices.

Yeoman_tutorial_basic

Generally, the Yeoman workflow comprises three types of tools: the scaffolding tool (yo), the build tool (such as Webpack, Gulp, Grunt) and the package manager, for example, npm and Bower.

 

2 Install Yeoman

First of all, make sure you have node.js installed.

Globally install Yeoman via npm:

$ npm install -g yo

Yeoman will run Yeoman Doctor automatically at the end of installing to check status of your node.js environment.

Yeoman_tutorial_Yeoman_Doctor

Check the version of your current Yeoman installed:

$ yo --version

Run Yeoman command line:

$ yo

After a fresh installation, there are no generators available. Yeoman prompt gives you an option to install a generator.

Yeoman_tutorial_run_yo

 

3 Generators

A Generator defines what and how to generate using APIs provided by Yeoman.

3.1 Find generators

There are two ways to find a generator.

The first way is yo command line. Select the option Install a generator after executing yo command then you will get an interactive prompting with message: Search npm for generators:. Input your generator keyword and then choose your generator from search results to install.

$ yo

Yeoman_tutorial_yo_search_generator

The second place to find a generator is Yeoman website. Search your generator there and then just install it following document of the generator.

3.2 Install a generator

I will take the generator generator-angular as an example. According to the document generator-angular depends on grunt-cli, bower and generator-karma, so we'll install them all.

$ npm install -g grunt-cli bower generator-karma generator-angular

If your installing is successful, the installed generators will be listed in yo command prompt.

$ yo

Yeoman_tutorial_generator_installed

3.3 Use a generator

Yeoman generators has a generator- prefix in their full name by convention, for example, generator-angular. You install a generator using its full name, but call a generator by yo only using its real name.

$ mkdir yodemo && cd yodemo
$ yo angular

Yeoman will call the generator-angular generator in above command to scaffold an Angular project.

Yeoman_tutorial_call_generator

Choose your options and press Enter key, then code structure and files of an Angular project will be generated.

Yeoman_tutorial_scaffold

3.4 Sub-generator

A generator can have one or more sub-generators within it. For example, you can inspect sub-generators of generator-angular by --help command line option.

$ yo angular --help

Yeoman_tutorial_sub_generator

We can see that there are sub-generators: angular:common, angular:main and angular:controller.

We'll look into the angular:controller sub-generator.

$ yo angular:controller --help

Yeoman_tutorial_sub_generator_help

It seems that we can generate a Angular controller by command: yo angular:controller CONTROLLER_NAME.

# cd yodemo
$ yo angular:controller demo

Yeoman_tutorial_sub_generator_result

Yep! A new controller file has been generated!