An Introduction to Yeoman

Need to speed up your front-end productivity and satisfaction when building a web app? Then Yeoman is the perfect answer. This set of tools will help you care about your code and testing your web app.

Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.

Tools

Bower
One of the tools used by Yeoman is also the very popular Bower. We’ll not stay long on this as we’ll just briefly say that Bower is package manager for front-end libraries. This means that it allows you to update to the latest version of jQuery, LESS, and Bootstrap in just a few minutes.

Grunt
Secondly we have Grunt. This is a task runner for projects. Basically Grunt does all the hard work that repeats. Essentially, work that can be automated – for example such as compiling Less/Sass files.

Yo
Yo is a tool that comes to us from the same team that maintains the Yeoman project. Yo offers web application scaffolding which also functions as a generator creating all the scaffolding that you commonly include in every project.

Installation

The installation of Yo and other required tools
Now that we’ve described the tools which Yeoman uses, we’ll install them. In the following steps we’ll go through the details, as these are things that you can easily install using the links below.

Node.JS — Node.JS install from the following link http://nodejs.org/
Git — Git download and install from http://git-scm.com/
Ruby — If you have one of Apple’s computers driven on the OSX operating system, Ruby comes pre-installed (you can check that through terminal: terminal > ruby -v). If this doesn’t apply to you, go ahead and install Ruby from the following link http://rubyinstaller.org/
Sass — Also don’t forget to install Sass (CSS Preprocessor). More information about what Sass is and how to use and install it can be found on the following link http://sass-lang.com/
Yeoman, Grunt, Bower — Using NPM install (NPM comes pre-installed with Node.JS that you have previously installed in first step) Yeoman, Grunt and Bower. Installation is very simple. Just run this command in the command prompt i.e. terminal on OSX.
> npm install -g yo bower grunt-cli gulp

Create your first Yeoman project
Now that you’ve got all the required tools we can create our first project.

To scaffold a web application, you’ll need to install the webapp generator. To do that you just have to run this command > npm install -g generator-webapp
Now your webapp generator is installed. Let’s create our first project on Yeoman. A screen just like this will appear on the picture below the text. Navigate through the navigation with arrows and check the plugins that you need with the Spacebar. Finally click Enter.
A screen like this one, on the picture above will be shown. Navigate through the navigation with arrows and check plugins that you need with the Spacebar. In the end click Enter.
The moment after you click Enter you’ll be asked to install or not to install LibSass. If you want to use LibSass read more athttps://github.com/sass/node-sass#node-sass
Now Yeoman will do the job. It will install your project. Your command line window should look like this:

Now you have your first project generated and ready to use. Prepare for next step — Usage

Usage

How to use Yeoman with the new project
We have 3 main Grunt commands that’ll help us in this process and you’ll use them very often - “grunt serve”, “grunt test” and “grunt”. I’ll explain command by command in the following text.

grunt serve – With this command you can preview an app you’ve generated in your folder (with Livereload — when you save your files you don’t have to refresh the website in your browser, you see changes on the go). From this moment Yeoman is watching your app folder for changes in Sass files and compiles them into regular .css format (More about this on http://sass-lang.com/). Also CSS/Sass/HTML/Javascript files will be compressed in 1 line. Furthermore livereload is enabled and you don’t have to refresh your browser on every file save. Finally to stop “grunt serve” click “ctrl + c”. Every time you want to make changes on your files you have to run “grunt serve”.
grunt test – Run the unit tests for your app. If an error occurred, terminal/command line will print your errors.
grunt – When you’re done with your project development you have to generate/build an optimized, production-ready version of your app. Just run “grunt” in your command line. If everything is OK and if you don’t have errors occurred your project will be generated in “dist” folder. When you have some errors that you want to ignore, but you can’t build your app, just run “grunt – –force”.

Conclusion

All in all Yeoman is a great set of tools that will rapidly speed up your development process. At the beginning you might be confused but as time goes by, you’ll grow fonder of Yeoman as you enjoy the benefits it provides.

Have fun!