By Anton N
 
Almost every web developer knows the feeling, when he experiences déjà vu, because each new project begins from the same set of actions: manual cloning the same catalogs structure, searching and downloading newest versions of libraries & frameworks, writing the same jobs for task running tools, css preprocessors and other plugins.

The good news is, there is a tool, which can do these things for you, and even do a little more. As the Yeoman official web page says, Yeoman is the web’s scaffolding tool for modern webapps. Put simply, it is a tool, which can do all the routine work for you: it generates folder structure, downloads the latest dependencies, automates assembling jobs – ie does everything, that one have to do manually at the beginning of project. To the moment, Yeoman can suggest you more than three thousands of different templates – most of them are related to front end, but it also has ones for e.g. spring or wordpress (at some extension, every project is just a set of folders and files, so it doesn’t matter, which technology is used).
 

The idea of Yeoman is very straightforward:

• It generates a skeleton of the application, using special “generator”
• Then all the dependencies are downloaded via Bower
• And finally Grunt or Gulp triggers their jobs to run tests and assemble applications

 
Ok, now let’s move from words to deeds. Let’s kickstart our first project – let it be angular js application.

First, we need to Install Yeoman – it is as simple as running a single node js command:
npm install -g yo

The next step will be installing necessary generator, for Yeoman to know “how” to create angular js application. Official Yeoman web page provides a huge variety of ready to use generators (at the worst you can write your own): http://yeoman.io/generators/

Let’s find available angularjs generators, by typing “angular js” word into a search bar:
 

 
I’ll pick an “AngularJS with GulpJS” option (I just can’t resist working with Gulp)

Installing it is very simple as well:
npm install -g generator-gulp-angular
 

Now we are ready to generate our application:

 
yo gulp-angular

We have just called Yeoman, and specified the name of generator to use. After answering some questions, for customizing our project (choose angularjs version, choose plugins to use, css framewords etc), we’ve got the following:
 

 

We have an application, ready to work with. It has all the dependencies installed, routines, like sass/less compilation, file concatenation/minifying/uglifying, code validation, are already automated, and all the modules are covered with tests!

One more thing worth noting here is the application architecture – files are organized not by belonging to the model, view or controller, but by the part of one or another component. The benefits of such approach are evident, when applications becomes large:

• Reusable components
• Code is easy to test
• Neat, organized html
• Thin controllers