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.
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.
Check the version of your current Yeoman installed:
$ yo --version
Run Yeoman command line:
After a fresh installation, there are no generators available. Yeoman prompt gives you an option to install a generator.
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.
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.
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.
Choose your options and press Enter key, then code structure and files of an Angular project will be generated.
A generator can have one or more sub-generators within it. For example, you can inspect sub-generators of
--help command line option.
$ yo angular --help
We can see that there are sub-generators:
We'll look into the
$ yo angular:controller --help
It seems that we can generate a Angular controller by command:
yo angular:controller CONTROLLER_NAME.
# cd yodemo $ yo angular:controller demo
Yep! A new controller file has been generated!