|Put your HTML development on steroids using Yeoman|
While starting another web project, I started downloading the always used framewoks like jQuery and the HTML5 Boilerplate (or making my own boilerplate which holds everything already). This is actually pretty boring, while I really want to start developing! That's where Yeoman can help out.
At first glance, Yeoman is just a tool that can help you to build web application with ease. But saying so wouldn't give Yeoman enough credits. As stated on their website, Yeoman 1.0 is more than just a tool. It's a workflow; a collection of tools and best practices working in harmony to make developing for the web even better. In this article, I'll try to explain in my words how to work with Yeoman and why it's so awesome. It can help you become a better allround webdeveloper!
Background / Prerequisites
First things first: Understand that Yeoman actually consists from three different tools:
Before going any further, I just wanted to point out that node.js and Git should be installed on your computer, and optionally, Ruby and Compass (if you plan to use Compass). Also, learn to love your command line. Most of Yeoman has to be executed through the command line, so don't be afraid to start up yours and get ready to go!
Yeoman has to be installed through a npm. Simply execute the following command through your terminal.
npm install -g yo
As you can see in the npm Docs, the
And there you have him! Our friendly guy Yeoman is now living inside your computer.
Quit your terminal for now, we just confirmed that Yeoman is correctly installed.
Yo uses Generators to scaffold the file and folder structure for you. There are loads and loads of Yeoman Generators created by the community. That way, the community can share their best practices, templates and more that will be used by Yo. The most popular one (at the time of writing), is the Angular generator, giving you a quickstart with Angular development.
In this article, I'll just install the basic generator for webapps. You'll need to install this through your command line:
npm install -g generator-webapp
Yo: Scaffold our project
You now have the generator installed which can be used by Yo to scaffold the application. Navigate to an (empty) folder where you want to start your project and let Yo do the magic.
Yeoman will now greet you, with some optional frameworks to be installed (jQuery and de HTML5 Boilerplate are added automatically). In this example, I'll be installing the Twitter Bootstrap for Sass, RequireJS and Modernizr as well.
Yo will now scaffold out the project. "Wow, that was fast!" Yes, indeed it was! No more downloading of libraries and taking care of boilerplating: Yo has you covered. You can now directly dive into developing.
Let's break this down to the most important files/folders:
Bower: Take care of my dependencies
Another tool used by Yeoman is Bower (created by the devs from Twitter). It is used to take care of any dependencies of the project. Simply use the following command to add an extra library (In this case: Underscore) to your application:
bower install underscore
The dependency is downloaded through Git and added to your application. The
That's the whole purpose of Bower, it's taking great care of your developer dependencies!
Grunt: Do my dirty stuff
Grunt is the tool I'm actually most exited about when it comes to webdevelopment and the Yeoman workflow. With it's huge number of plugins (once again, maintained by the community), Grunt can do a lot for you. Grunt executes the steps that are defined in the Gruntfile.js. Usually, the Yo generator already included the correct steps for Grunt, but you might want to add something to that later. Grunt is way to big to be discussed in this article, so I suggest you dive into the docs.
For the sake of the Yeoman workflow, I'll just cover some useful basic commands.
Every developer should test their application. By writing unittests (for example in Mocha, QUnit or Jasmine) you can verify the quality of your code. The generator already scaffolded a basic test example, which can be run using the
So, you want to quickly preview your application without having to install something like XAMPP or IIS as a web server? Grunt has your back! Just run the command, and you'll be able to see your application.
This is the heavy step. It builds the application for deployment: the
I think the Yeoman workflow is just great. Although it was pretty new for me to do a lot through the command line, you'll eventually get the hang of it. I did find it somewhat hard to learn Grunt (and understanding the
Interested in this topic? You might enjoy another article I've written called
|Or try the sitemap|