Yeoman jumpstart

In this jump start I will show how to create a Angular directive using Yeoman.

But before the good part, let me briefly introduce to you Yeoman, or can’t handle yourself just skip to the good part.

What’a hell?

You may not know about the existence of Yeoman, as I didn’t. So in that case you are asking yourself “What the F$%# is this?”. Yeoman is scaffolding tool that helps developers to start up their projects, especially the web kind. It generates boilerplate code, including bower and npm package references and task runner scripts like grunt and gulp.

And? Why should I care about it?

Actually, this is pretty neat, because you can easily set up a solution with a whole structure, without having to copy code from other projects or write the same jibber jabber.

Therefore, it increases your productivity and, if use it the right way, software quality, by adding and configure tools that you would may leave behind, because they “delay” your “progress”.

It has already set of generators, that cover a good variety of solutions. Each one requires some usual tasks for its purpose, like automated tests, build, watch (livereload), and in common projects dependencies, as AngularJS, Bootstrap.

In order to cover these needs, it may generate bower and npm package references and Grunt or Gult files for running tasks.

#LetsGetDownToIt

We need some stuff fist:

• Install NPM, nodejs package manager
• And them Yeoman itself, running the following command:

npm install -g yo

Now we are good to go! We need to download the angular directives generator for Yeoman.

You can find generators by searching in npm by packages with the prefix “generator”, like that:

npm search generator WhaterverYouLike

In this case we will need the angular directive, so we search like this:

npm search generator directive

With the package name in hand we install it.

npm install generator-angular-directive -g

The npm packages with “generator-“ prefix stands for yo templates. To run the recently added generator, we just need loose the prefix and pass it as argument to Yeomann. Before this ensure that you are in the project folder.

mkdir ng-yomanDirective
cd ng-yomanDirective
yo angular-directive

Now that the magic happens! The Yeoman will ask some setting to generate in a more convenient way the project.

This template will ask you the name you wish to give for your new directive and your github name.

And them It will create a solution with: * A configuration to build, run test and run server for live demo; * Automated test configuration with karma and jasmine; * Travis configuration for continuous integration.

These are the things you need to just start developing.

With the solution set run the following lines to install all dependencies:

npm install -g gulp
npm install -g bower
npm install
bower install

For run the live reload demo run:

gulp serve

And to develop using TDD, looking forward to maintain your bar green, run:

gulp test