How to Put a Kind Englishman in Your Build Process

Rethinking Our Build Process

At Sparkbox, we use our generic project-init as the starting point for all frontend work. As we’ve mentioned previously, we utilize Grunt to run our build process tasks, and recently we’ve made some changes. But first, a little history.

It was a little over a year ago that we started talking about Grunt in our office. Rob Tarr and I were drawn to Grunt because of the flexibility it provided and its huge plugin library. At the time, Yeoman had just come on the scene, and there was a lot of excitement around it. Out of the gate, Yeoman had some identity issues: it didn’t really know what it wanted to be yet. Yeoman covers this early history over on the Yeoman Wiki. While we were intrigued by Yeoman, we decided to stick with Grunt and see how things evolved.

Boy have things evolved! In the last year or so, Yeoman has incorporated Grunt and Bower to form a frontend-automation superhero team of awesomeness. Yeoman became a generator for projects (and took on the moniker, “Yo”) and let Grunt do what it was great at—task-running and build-processing. Bower came into the picture, from Twitter, as a way to manage all the JS library dependencies that every web developer uses throughout the life of a project. Yeoman now bundles these three tools: Yo, Grunt, and Bower. Again on the Yeoman wiki, they lay out their definition of what Yeoman has become, which is “an opinionated collection of Grunt tasks, with scaffolding.” After reading up on Yeoman’s new direction, I decided to look into porting project-init over to a Yeoman generator.

Updating Our Process with Yeoman

This endeavor didn’t take much time. Yeoman’s introduction to writing your first generator is quite good at getting you up and running. Essentially, a Yeoman generator creates and moves the various directories and files you need for your project. It then installs the various dependencies your project requires via npm install and bower install. That’s it. Though seemingly a bit simple, the benefits of a Yeoman generator are pretty awesome:

1. It’s really easy to get started. Spin up a generator by simply typing yo and then the generator name. It’s that simple. Predictable, repeatable, and brief.

2. It manages JS dependencies. As I mentioned, a Yeoman generator supports Bower out of the box, which is a good thing. Even if Bower isn’t the long-term solution for managing JS dependencies in a project, it’s a great start.

3. It allows for testing. Any automated tool like Yeoman needs to have some tests around it to make sure the automation that occurs is error-free. Yeoman has this, and it’s a good thing.

4. It has awesome ASCII art.

Hello, Mg

Long story short, generator-mg (named after the combustible element, Magnesium) is Sparkbox’s renamed firestarter for frontend projects. Mg is the Yeoman generator version of project-init. It takes one variable, the project name, and generates the entire project. Right now Mg is just a Yeoman wrapper around our project-init structure. Yet, going forward, we hope to accomplish a few other things:

1. Make the Gruntfile more manageable and understandable.

2. Explore abstracting pieces of the build process away into their own npm modules to ease updates.

3. Wrap tests around generator-mg to increase quality control as we make updates.

4. Remove the cruft of a year’s worth of modifications.

Feel free to install Mg and take it for a spin. Install Yeoman, and then install generator-mg. It’s that easy. Going forward, generator-mg is just as functional as project-init but has more upsides and room to mature.