Introducing Yeoman

Web developers all have different ways of working, but there’s always that set of frameworks and libraries we install on each project no matter what.

With this comes the tedious work of downloading each one and placing them in our project folder; this doesn’t sound like much if done once or twice but when it’s necessary almost everyday it becomes a tedious task.

If you share this opinion Yeoman is right up your alley.

What is Yeoman ?

Yeoman is a workflow, it’s not just a tool but a collection of tools that help developers quickly build amazing web applications. It’s build on top of Node.JS and it’s the combination of 3 amazing tools:

  • Yo – Yo scaffolds a new application, writing and pulling in relevant tasks from your Grunt file.
  • Grunt – Grunt helps you build, preview and test your application.
  • Bower – Bower helps with your dependencies so that you don’t have to manually download and install each one.

The combination of these three tools allows yeoman to create the application skeleton, compress images, compile Compass and CoffeeScript files in seconds, all done without you reloading the browser.

Using Yeoman

The first thing you need to do to use Yeomen is to install it on your machine, in order to install it you need to have Node.js installed. If you already have that installing yeoman is one simple command:

npm install -g yo

Running this command also installs bower and grunt automatically.

Yeoman is installed in your machine but it hasn’t done anything yet, to have yeoman create the skeleton for our project we need first to know what we want to build and then install the generator accordingly.

Generators work a little like plugins for yeoman and every generator serves a specific propose, to install the webapp generator we type:

npm install -g generator-webapp

This particular generator scaffolds a front-end app that comes with automatic browser reload, Compass and CoffeeScript compilations , Bootstrap and Modenizr. It contains pretty much all you could ever want in a front end app.

But if these tools aren’t enough and you need, for example, underscore in your project as well, just type:

bower install underscore

Now that we have it installed we can use it by running:

yo webapp

You should run this in a directory of your choice, you can either create it on your terminal or simple cd in to it when you created it in your GUI. Now if we open up that folder you can see all the components that yeoman has installed for us and we can even preview this application in the browser by running:

grunt server

When you run this and get no errors a server will be automatically created for your application so that you can see it in the browser and if you try to edit any of the files in the application folder you can see that the browser reloads automatically when a file is saved, saving us another tedious task.

When you have finished creating your app and want to move it to production you can create a build by running:

grunt

What this will do is lint your project, make your scripts and styles as small as possible, and also optimize your images for a smaller loading time on your page once it goes live.

Generators

Another great thing that yeoman has is the abundance of generators, it has a generator for just about any project you are thinking about undertaking.

If you want to create a WordPress project instead of a front-end app there is a generator for that and also for Laravel and even for a Chrome Extension.

You can search for generators in the community generators page and install them on your machine.

Final Thoughts

Yeoman is an extremely useful collection of tools that create a modern workflow for web developers everywhere, a faster and more concise workflow.

It helps you from start to finish, in the scaffolding and in the concatenation and optimization of the files in your application when you are ready to move to production mode.

Have you used Yeoman? Do you prefer an alternate set of scripts? Let us know in the comments.

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website. More articles by Sara Vieira
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress