My Yeoman Generator [grunt, cordova, angularjs]

Quicklink - Github Build Status

Introduction - Yeoman Generators

If you’re currently developing with Yeoman or Grunt then you probably have heard of or even used a yeoman generator before. After using a generator for a while it’s likely to find things you wish were different about the generator or additional features you’d like to see implemented.

When I first used yeoman and grunt I found myself tweaking the gruntfile.js to fit my preferences and needs. This was great while working on my current project, but when it came time to start the next project I realized I’d have to leave my gruntfile preferences behind, or copy them to the new project, risking compatibility issues.

The Aha Moment

Why not create my own generator? It will have my preferences, and meet my needs when developing. Brilliant idea, but isn’t creating a generator hard? I first began by looking at an existing generators code and it seemed very foreign to me. After discovering and reading the official generator introduction by yeoman I began understanding the task and realizing it was much easier than I first anticipated.

Getting Started

To start, visit yeoman’s generator introduction page. The documentation seems to be a little outdates as the templating format has changed from using the prototype chain:

var BlogGenerator = module.exports = function BlogGenerator(args, options, config) {
  yeoman.generators.Base.apply(this, arguments);
  // ...
};
util.inherits(BlogGenerator, yeoman.generators.NamedBase);

To using an extend model

var BlogGenerator = yeoman.generators.Base.extend({
  init: function () {
    // ...
  }
});
module.exports = BlogGenerator;

Even so, the tutorial is very useful in explaining the thought process to writing a new generator. Once you get familiar with the basics of writing a generator, check out other generators from which you’ve used or that are popular. I heavily used the Angular generator as a reference to solving problems like adding compass or fixing my unit tests. Keep reading below if you’re interested in seeing what I created.

My Yeoman Generator

To install:

$ npm install -g yo
$ npm install -g generator-ng-cordova

It’s that easy! check out the repo for more details

Description

I’ve created this generator to help me setup new angularjs and phonegap applications. The idea started with my yeoman and phonegap tutorial receiving some suggestions for a yeoman generator. Since I’m a bit of a fanboy for angularjs I wrote this generator to specifically template my application around how an angularjs application would be structured. With tools and libraries like Ionic openly available, it’s given me ideas on how I’d like to expand my generator.

Conclusion

Check out Yeoman Generators to see how it can improve your development and feel free to get involved with ones already existing.

Thank you

Back