Using Yeoman in your workflow

There are tonnes of web development tools to help front-end developers these days that it can start to become overwhelming. I know I was! (Not gonna lie!). So before we begin, I thought I would go through some of the steps of using Yeoman in my web development workflow.

First you’ll need to get a clear picture on what you’d like to achieve and what your end result will be. For me, I wanted to re-design an existing static website to make it responsive (more about RWD on a future blog post).

Now to quickly go through the Yeoman process:

What is Yeoman?

“Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications. We take care of providing everything needed to get started without any of the normal headaches associated with a manual setup.” – Yeoman

The Yeoman workflow is comprised of three core tools. These tools are:

  • yo – the scaffolding tool from Yeoman
  • bower – the package management tool
  • grunt – the build tool

Follow the ‘Getting started’ instructions provided by Yeoman.

Here’s the gist of what to type in your Terminal / Command Line:

npm install -g yo
npm install -g generator-webapp
mkdir my-test-project
cd my-test-project
yo webapp

You should then see an interactive prompt:

Yeoman generator web app prompt

Once everything has been installed by Yeoman, if you open up your project folder in a text editor (my preference is Sublime Text), you should see a whole bunch of folders and files. Don’t get too overwhelmed, here’s a simple explanation of what each folder contains:

Project folder structure

  • The app folder is where your pure, non-compiled, non-minified source code lives. The files within the app folder is where you do all your development work in. This is where you’ll find all of your HTML, JavaScript and Sass files.
  • The bower components directory includes all of the dependencies for your application, such as jQuery and Modernizr. You can add more Bower packages using the install command:
    bower install  --save-dev
  • The dist folder (or the distributable folder) is the folder to FTP as your clients’ site so it’s what you feed to the server.

    Please note that you won’t see the ‘dist’ folder until after you run ‘grunt build’ (more on this later). It will have it’s own index.html, with references to minified and concatenated dist/scripts and dist/styles, and optimized dist/images.

  • The node_modules folder and package.json file are part of the Grunt build. If you need further explanation, take a look at my previous blog post.
  • The Gruntfile.js has all of the build, server, and test tasks defined. Behind the scenes, grunt build is a task that runs several sub-tasks. There are also plenty of useful plugins (provided by Yeoman) so here’s a brief explanation of some of the ones you probably haven’t heard or used before:
    • clean: – Yeoman stores some stuff in a .tmp folder. That will be wiped out.
    • connect: – Creates a local server, watches for changes to your source files, then triggers a reload in your browser.
    • open: – Opens the server instance, typically localhost:9000 in your browser.
    • copy: – Copies files from .tmp/ and app/ into dist/
    • clean:dist: – Clears out your .tmp/ and dist/ folders
    • usemin: – Updates the references in your HTML with the new files

Just to elaborate on ‘grunt-usemin

The grunt-usemin plugin looks for blocks inside of your app/index.html, like this:

app/index.html

<!-- build:js scripts/main.js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->

After your grunt build task completes, you will end up with this:

dist/index.html

<script src="scripts/c155266f.main.js"></script>

It sucked those scripts up, concatenated and minified them into one JS file. Now that’s pretty awesome!

So now that you’ve gained a basic grasp of the your project’s folder structure and files, it’s time to put it all together and finally run the Grunt commands: serve, test and build!

Steps to run Grunt (as written from Yeoman):

Preview an app you have generated

grunt serve

Run the unit tests for an app.

grunt test

Build an optimized, production-ready version of your app.

grunt

And there you have it!

I hope this blog post has somewhat helped you understand how Yeoman can be utilised in your web development workflow to create sites and web apps.


Sources: