Developmentprogramming

Why I Made a Custom Yeoman Generator

By May 24, 2016 No Comments

Generator-ninthlink is a Yeoman generator used to scaffold static web applications. By running the command “yo ninthlink” in the terminal, we can generate a project’s directory structure, configuration files, boilerplate markup, and a great number of tools for speeding up the development process and ensuring the final product is lightweight.

I initially set out to build this tool from scratch, but then realized that an excellent generator already existed. This generator, created by the Yeoman team, had many of the features I was looking for: minification (css, js, and image assets), BrowserSync, Sass compilation, etc . . . and it appeared to be maintained regularly.

Originally, my intention was simply to get UnCSS working with Yeoman. UnCSS is a clever invention: it detects which CSS rules have no corresponding declaration in the markup, and then strips these out. When my initial tests of this integration proved successful, I assumed there to be no reason to make further changes. This assumption turned out to be false for a few reasons:

  1. Things need to be maintained.
  2. Things can always be better.
  3. Alex has a lot of ideas.

I’ve accepted the fact that this project will be ongoing. We’ve used this generator quite a bit recently, so I’m not bothered at all by this unforeseen increase in complexity. It’s not perfect yet, and something will definitely break in the future. But that’s all fine and well because even if we eventually discard ALL of this work, we will have learned something. At this point in time, however, the project paradigm exemplified by Yeoman (scaffolding tool + build tool + package management) seems to be quite powerful.

For the record, here is a list of modifications I’ve made to the original generator:

  • UnCSS (and custom configuration to eliminate conflicts with Bootstrap)
  • re-integration with Travis-CI (for automated testing)
  • the ability to choose between Google Tag Manager and Google Analytics
  • Bootstrap linting
  • the addition of a pre-configured .htaccess file
  • added variables for easier maintainability
  • custom Gulp configuration all-around, according to our needs at Ninthlink

Before signing off, I need to emphasize that Alex, the senior developer here at Ninthlink, has played a big role in shaping the direction of this project. He’s allowed me to break a great number of websites, and then allowed me to spend time fixing almost as many. Also, please do yourself a favor and check out out the Yeoman project, its contributors happyluke, and related open-source dependencies. A huge variety of Yeoman generators exist, so you might want to perform a quick search here to see if  they have something you need.

Thanks for reading.

 

Leave a Reply