Friday, October 18, 2013

Getting started with Yeoman - revisited

In my last post - I installed Yeoman onto my machine and scaffolded a new website. But's let's have a better look at what I actually had been doing.



So - what's Yeoman? I was looking for a one-liner on the website, but couldn't find one. My understanding of it thusfar, is that it's a scaffolding tool. Yeoman uses two other Node packages: Bower and Grunt.

Grunt

Grunt is a task runner written in JavaScript (so for node). It's like ANT : you can make it do stuff for you related to your website's deployment, like js minification, PNG optimization, version numbering etc. Here's a list of plugins that you can do work for you: http://gruntjs.com/plugins.

And here's a Google guy showing how it makes your life a whole lot easier:



Bower

Bower is a package manager, like NuGet:, created by Twitter. The parallel makes sense, if you're into .NET - like me. You use it to get packages and manager your dependencies. Here's a quick video by that NetTuts guy.



Man - I don't know how that guy types SO fast, without errors and knows all this stuff by heart. You want to know what packages are available? Here's the list: http://sindresorhus.com/bower-components/

Yeoman

So yeoman makes use of both Grunt and Bower to scaffold your website. It uses so called 'generators' for that. You can find a list of generators on the website here: http://yeoman.io/community-generators.html.

I installed a generator when I ran:

sudo npm install -g generator webapp

Then I had yeoman scaffold this generator for me in my /www/yeoman folder using the yo webapp command. Et voila - your first site with yeoman up and running.

2 comments:

  1. There's an error in the commandline: sudo npm install -g generator webapp
    should be: sudo npm install -g generator-webapp
    as stated: http://yeoman.io/learning/

    ReplyDelete
    Replies
    1. Haha koning - ik zie je comment nu pas. Ik heb het aangepast, thanks!

      Delete