Yeoman Generator Development Tips

Tips for those creating Yeoman generators

Posted:

Yeoman generators are a powerful tool for developers, they enable us to get up and running with projects extremely quickly. I created a generator for our Kickoff framework and came across a few things that I thought others would benefit from; hopefully this post will shed some light for others creating their own generators.

The Kickoff Yeoman generator is a simple way to ‘kickoff’ your project even more quickly than before. It simply asks a few questions, modifies some files, adds the results to the ouputted files and installs some npm and bower dependencies.

Escaping Underscore template variables

Use double percent signs to escape Underscore template variables, like this: <%%= someVar %> instead of <%= someVar %> and you should be sorted. I had this issue in the Gruntfile where there are quite a few of these tags, see here. Credit for this goes to a helpful comment on Github.

Run Grunt (or another command) after Yeoman builds

The Kickoff generator runs a Grunt task immediately after it has finished compiling and installing everything, I was able to do this by running the spawnCommand method in the dependenciesInstalled callback, like this:

// Now you can bind to the dependencies installed event
this.on('dependenciesInstalled', function () {
  if (this.jsLibs === 'jquery') {
    this.spawnCommand('grunt', ['jquery']);
  }
  this.spawnCommand('grunt', ['serve']);
});

See this in our actual index.js

How to log a coloured message with Yeoman

To colourise your text, you can use the same colour module as used by the generator system, called Chalk.

First install it:

npm install --save chalk

Then require it:

var chalk = require('chalk');

Then use it:

console.log(chalk.bold.yellow('message'));

Chalk colours in the Kickoff Yeoman generator

If you would like to know more about different prompt/question styles, see the Inquirer.js docs. Kickoff’s can be found here.

Conditional statements in your generator

As you can see above, our generator asks if you’d like to include jQuery in the project, if the user does, the relevant ‘jQuery Builder’ Grunt plugin configs are added to the package.json and the Gruntfile before being installed with npm, then a post generator task is also run to build the library.

Some simple conditionals were needed in the Gruntfile, package.json and the index.js, but I found setting up these conditionals a little tricky. They are basically standard javascript if statements wrapped in an underscore template tag but need to be wrapped with raw tags. Here’s an example from our package.json:

<% if (jsLibs == "jquery") { %>,"grunt-jquery-builder": "~0.1.1"<% } %>

/* or */

<% if (jsLibs == 'jquery') { %>,"jquery": true<% } %>

Notice the preceeding comma before the conditional’s content? JSON syntax is very strict, if a comma isn’t there, or is in the wrong place, it will throw an error and npm will not install the dependencies, that is why I included the preceeding comma within the conditional. It might seem obvious but this logic needs to be self-contained and the surrounding code needs to be unaware of it, if it does not exist.

Try the Kickoff generator

To install it, run:

npm install -g generator-kickoff

To use it run:

yo kickoff

Please leave a comment below if you have any other tips, we’re always keen to find out more.