What is it?

According to Yeoman’s documentation Yeoman is explained as the following…

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.

…The Yeoman workflow comprises three types of tools for improving your productivity and satisfaction when building a web app: the scaffolding tool (yo), the build tool (Grunt or Gulp) and the package manager (Bower, NPM).

If we break up each part that comprises Yeoman it equates to a scaffolder, a build system and a package manager (handling downloading and updating of assets such as jQuery, Bootstrap and Normalize). All this equals productivity and the highest of fives all around as you develop and deploy.

How it improves your workflow

Improving your workflow so developers can spend less time on process and more time focusing on building beautiful web based products is the primary reason to use a tool such as Yeoman. Let’s say on deployment of a project you want script references concatenated, minified as one file and the reference(s) replaced with a cache bust string. For example, you may have something like this in your development file…

<!-- Development File -->
<script src="js/script1.js"></script>
<script src="js/script2.js"></script>
<script src="js/script3.js"></script>

All these script references above will be converted to the following for production deployments by running something like a custom Grunt task called “grunt deploy“ from the command line giving us this script reference replaced in the production file like this…

<!-- Production File -->
<script src="js/scripts.min.3456879.js"></script>

Yeoman also helps scaffold out an initial build/dev tasks like spinning up a development server, reloading the browser on file changes, minifying HTML for production, controlling output and much, much more. Essentially Yeoman is laying out a foundation for typical developer needs and tasks so you, the developer, can get to work faster.

When starting a new Yeoman project it uses what’s called a “Generator.” A generator is essentially a boilerplate of pre-made structure and pre-written tasks for your particular workflow. You can find a full list of generators available for Yeoman here. For developers that desire something more custom you can create custom generators too!

Installing

Now that we understand what Yeoman can do for us, let’s jump over to the command line so we can begin the installation process. If you’re coming from a fresh installation ensure your system is setup correctly to avoid any sudo permission issues. Windows users should also verify Git, Ruby and other dependencies required by a generator are installed before executing any of the above commands. When using a generator take note of the README that usually lists these dependencies required in order to install the generator. Remember generators are a completely separate thing entirely and not something pre-built into Yeoman.

Assuming you have everything in place for installation you can run through the following commands to start your first Yeoman project using the webapp generator.

$ mkdir yeoman-project
$ cd yeoman-project
$ npm install -g yo bower grunt-cli
$ npm install -g generator-webapp
$ yo webapp

Explaining these commands in detail we begin by making a new project directory, then traversing into this created directory (cd command), installing yeoman/bower & grunt globally to our system, installing the webapp generator and finally executing yo webapp to generate the scaffolding. Since webapp is a generator you must install it first and the reason why we run npm install -g generator-webapp before executing yo webapp.

Now let’s take a look at what happens once we run a generators command such as yo webapp in our case. Running that command will give us the following…

$ yo webapp

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `
 
Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app.
? What more would you like?
 ◯ Bootstrap
❯◉ Sass
 ◉ Modernizr

? What more would you like? Sass, Modernizr
? Would you like to use libsass? Read up more at
https://github.com/andrew/node-sass#node-sass: (y/N) y

   create Gruntfile.js
   create package.json
   create .gitignore
   create .gitattributes
   create .bowerrc
   create bower.json
   create .jshintrc
   create .editorconfig
   create app/styles/main.scss
   create app/favicon.ico
   create app/robots.txt
   create app/index.html
   create app/scripts/main.js
   invoke   mocha

I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself.


   create     test/bower.json
   create     test/.bowerrc
   create     test/spec/test.js
   create     test/index.html

Examining the output of yo webapp we’ll see an entire scaffolding of files and directories are created for us magically by unicorns and fairies.

Take special note with this particular generator as it is using Grunt. Now we can simply execute grunt serve from the command-line that will fire up the site on http://localhost:9000 automatically in the browser. Pretty cool right?

Going Further

Anytime you need to update Yeoman you can type yo -v that will examine Yeoman’s current version. If you’re out of date then Yeoman will be frank about it and let you know.

$ yo -v

     _-----_
    |       |    .------------------------------------------.
    |--(o)--|    | Update available: 1.4.2 (current: 1.2.1) |
   `---------´   |      Run npm update -g yo to update.     |
    ( _´U`_ )    '------------------------------------------'
    /___A___\
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

If you’d like to see a project using Yeoman head over to this GitHub Repo for a deeper look into an actual Yeoman project that also uses the git subtree command documented by Yeoman in order to deploy production code to another branch entirely!

Take the extra time to set aside getting to know a better tooling workflow that will dramatically improve your daily and routine tasks so you can not only get to work faster, but enjoy what you do that much more.