How to use Yeoman Generator

By this time you’ve probably already heard of Yeoman and chances are you have used it once or twice, it’s a great automation tool that pretty much gives your entire workflow a push in the right direction.

If you have used it, you know that Yeoman runs on Generators; you pick one and Yeoman does the work of scaffolding your application based on your needs. There are more than 600 generators listed on the website but sometimes you need one that meets your requirements precisely, and if you can’t find it the good news is you can create you own.

Getting started

I am going to assume that for this tutorial you have nodejs and Yeoman installed on your machine.

As I said Yeoman runs on generators and of course we have one to create our own generator. To install it you need to run:

npm install -g yo generator-generator

This will install the generator on your local machine.

After it has installed you need to actually boot up your project by navigating to your preferred folder and running:

yo generator

You will be asked a few questions and all the files will download and be placed into your project folder ready to be played with.

Scaffolding the application

If you are like me, you want to get the quick stuff out of the way first. You probably have your favorite starter template laying around your computer and that starter template belongs in the templates directory of your generator. This is where all of your magic should go down, place all your HTML or HAML files, your preferred JavaScript libraries and even set up your Grunt File to do all the great things you want it to do.

Basically, do your thing, the way you like to do it.

The index.js

As you may have seen from other Yeoman generators you usually get asked a couple of questions before Yeoman actually starts booting up and downloading all your files. This is all placed in the Index.js file inside the app folder.

If you pop open that file you can see that there is already a function that greets the user and we are gonna change this to have Yeoman ask the user some questions and then greet him:

 askFor: function () {
    var done = this.async();

    this.log(this.yeoman);

    this.log(chalk.magenta(’This generator is great! Have Fun’));

The first thing we changed is the second log function, what this function does is give the user a brief description of your generator, if you like you can even delete it completely.

var prompts = [{
            name: 'appName',
            message: ‘What will be the name of your application ?’
        },{
            type: 'confirm',
            name: 'addJquery',
            message: ‘Would you like jQuery added ?',
            default: true
        }];
 
        this.prompt(prompts, function (props) {
            this.appName = props.appName;
            this.addDemoSection = props.addJquery;
            done();
        }.bind(this));

You can substitute this with your own questions if you would like, for a more advanced generator it’s always good to give the user flexibility when it comes to their answers.

The next step is to add the name answer to our _package.json file:

{
  "name": "<%= _.slugify(appName) %>",
  "version": "0.0.1",
  "private": true
}

And this will turn your then created package.json into a customizable one, if you need more it’s just a matter of adding some more questions.

Now it’s all a matter of your personal preference, and using the copy() function in your index.js to copy all the right files into the right places.

    this.copy(‘_index.html’, ‘index.html’);
    this.copy('_package.json', 'package.json');
    this.copy('_bower.json', 'bower.json');

You can also make directories using the familiar mkdir function, this will help you when creating all the subdirectories for your files:

    this.mkdir('app');
    this.mkdir(‘app/js’);
    this.mkdir(‘app/css’);

Set up your grunt to compile Sass, minify, hint JavaScript or even run a server, anything you need.