Table of Contents
Chances are, you’ve heard of Yeoman before, but don’t exactly know what it is. Well, hopefully I can help you get started with using this awesome web development workflow tool in less than 10 minutes.
What is it?
Yeoman is a command line tool built for the purpose of helping you (a web developer) in your everyday development workflow. That means it can generate starter templates for you whether or not you’re using a web application framework such as AngularJS, Backbone.js, or something else. Not only do you get a kickstart on your project, but you also receive code that adheres to the current best practices as the public contributes to the code for Yeoman generators.
If you haven’t already, install node.js by visiting its website and clicking the install button. Next, open up Terminal or the Command Prompt (depending on what OS you’re using) and enter the following command:
npm install -g yo grunt-cli bower
Next, you need to install generators in order to use the starter templates described above. Let’s say you wanted Yeoman to create a basic template for a web application. First, you need to install the generator for this functionality. This is as simple as:
npm install -g generator-webapp
Installing other generators follows this same format. For example, if you needed an AngularJS generator, you would use:
npm install -g generator-angular
After installation, using generators is as simple as going to the directory where you want the template to be installed and typing the following in the Terminal or Command Prompt:
This assumes that you are using the webapp generator. Using the AngularJS generator instead would look like this:
Once you run the generator, you should get a folder full of all the dependencies and source files for your web development project.
To start developing locally, simply run:
This will fire up a localhost server for you to develop on. Another neat feature is that the server updates automatically as you edit the project’s source files, meaning you can see your changes instantaneously.
Building Your Application
Once you’re done developing your amazing application, you can build it into a production folder using:
index.html file, and create a
dist folder in the main directory for you. Then, you can simply transport your completed application elsewhere by using the
dist folder (short for distribution).
That’s all there is to mastering the Yeoman tool! Be sure to check out more community and built-in generators here. Also, check out the official getting started page on the Yeoman website. Thanks for reading!