I’ve been wanting to wrap my head around Yeoman for a while now. It seemed every time I found a moment of free time to dive into understanding Yeoman, my brain was already fried from that day’s job-related development work. I continued to spin-up a generic “webapp” generator & failed to understand the seemingly complex ideas behind Yeoman. This process continued until now, when I decided to move my personal site to GitHub pages & Jekyll. I wanted to share my experience and provide a brief overview/tutorial of using Yeoman.
It seems that in order for me to finally understand the beauty of Yeoman, all I needed was an end goal: a Jekyll site. It turns out this is exactly why Yeoman was created — to help you quickly achieve your goal by generating a lot of the initial boilerplate code for you.
npm install -g yo npm install -g generator-jekyllrb cd path/to/site/directory yo jekyllrb grunt server
Assuming you already have Node & npm installed (I recommend using homebrew), that’s all it takes to get a Yeoman-generated, Grunt-compiling Jekyll site running on your local machine. I am utilizing the jekyllrb generator that I found via the Yeoman community generators page.
A nice thing about the jekyllrb generator is that it has built-in configuration options for including/excluding Sass, Compass, Bootstrap, H5BP & CoffeeScript — as well as other tools. This step-by-step approach to generating my Jekyll site through a Yeoman generator helped me understand the benefit of Yeoman generators. Creating & configuring my Jekyll site became very easy.
The Yeoman workflow also includes the use of Grunt & Bower. Bower is a package manager. In short, it simplifies the process of downloading & including libraries on which your web app/site may depend.
bower install jquery
The above installs jQuery into the
_bower_components directory of my project. I can then load that dependency into my project with a traditional script tag.
The Grunt tasks included with the jekyllrb generator also include support for Usemin. Usemin allows for replacing references to non-optimized scripts & stylesheets (typically found in development environments) with references to optimized scripts & stylesheets for production.
<!-- The following Usemin block... --> <!-- build:js(app) /assets/js/app.js --> <script src="/_bower_components/modernizr/modernizr.js"></script> <script src="/_bower_components/jquery/jquery.js"></script> <!-- endbuild --> <!-- ...is replaced with a single minified script tag. --> <script src="/assets/js/f7f2.app.js"></script>
grunt build task produces a compiled, concatenated, minified, production-ready version of my Jekyll site. Once that build is created, I can use a task provided by grunt-build-control to automate my deployment to GitHub pages.
All in all I’m very happy to finally have a high-level understanding of the benefits of Yeoman. I look forward to exploring creating custom generators of my own to speed up my workflow, as well as streamline project spin-up for my coworkers.
If you have any questions or comments about using Yeoman, Grunt or the jekyllrb generator, feel free to leave comments below.