I have been hesitant to move into “managed workflows” for my Javascript development. Mostly this is because nine times out of ten, the projects I do in my spare time are super basic and I feel I rather keep it clean and transparent, than adding in a lot of cruft. That said, I finally decided to give Yeoman and Grunt a go.

Workflow frameworks and helpers like Grunt, Gulp, Yeoman, Bower, Compass and what not are great, but mostly overkill for simple things. It’s like when you start generating classes in an enterprise class IDE and end up with thousands of lines of code that you don’t know if you need or not. If you are unsure about the underlying technologies, you will be lost at the first unexpected exception in the generated code.

This is not to say I dislike IDEs, quite opposite, I use WebStorm a lot, but as with any tool, you need to pick the right one for the task at hand. I use Sublime Text daily and I am currently writing this text in good old Emacs.

Anyway, lately I decided that Yeoman probably can help me after all, or at least I should know more about it, so I decided to take it for a spin. Since I like AngularJS as well, I decided to install the Yeoman official AngularJS generator in the same go. The experience made me write this post, so that if I have to do it again, I have a place to find all the commands needed. :–)

This is a quick summary of all the commands needed to get up and going with yeoman and the angularJS generator on MacOSX. I have it working in Windows as well and the commands are the same.

For my memory and for anyone that also needs them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Assuming you have Ruby and Node.js previously installed
sudo gem install compass
npm install -g yo
npm install -g generator-angular

# Ok, the global commands are now in place.
# Time to make our first project.

mkdir my-new-project && cd $_
yo angular MyAngularApp
npm install
bower install
npm install grunt-karma --save-dev
npm install karma-jasmine --save-dev
npm install --save-dev karma-chrome-launcher
grunt

# Everything should be ok, so start developing
grunt serve

Good Luck!