Super Guia de início rápido para Yeoman, Grunt e Bower

http://otaqui.com/blog/1594/the-super-quick-start-guide-to-yeoman-grunt-and-bower/

Este guia é para desenvolvedores da web que sabem o que estão fazendo, mas não tentaram usar o Yeoman 1.0. Pareceu-me que faltava na documentação um guia do tipo “basta fazer isso”, então eu escrevi um.

Aqui está, repetido na íntegra

O Super Quick Start Guide to Yeoman, Grunt e Bower
Postado em 2 de julho de 2013 por pete & arquivado em Professional.

Yeoman é uma ferramenta fantástica para fornecer a você uma estrutura de projeto padronizada, pensada e útil para aplicativos html e javascript.

A única coisa que acho que falta é um guia de início rápido muito simples para novos usuários, daí esta postagem no blog.

Etapa 0: Requisitos

Yeoman pode não funcionar ou ter mais problemas para rodar no Windows. Obtenha uma máquina virtual Linux de uma vez e execute todas as etapas a seguir.

Etapa 1: Obter Nó / NPM

Você precisará instalar o NodeJS de maneira adequada à sua plataforma. Ele deve (com sorte) vir com o NPM também, ou se não, você também precisará instalá-lo.

Etapa 2: instalar o yeoman, grunt e bower

Observe que o pacote yeoman é chamado de “yo” e o pacote grunt é chamado de “grunt-cli”.

$ npm install -g yo grunt-cli bower

Etapa 3: obtenha o (s) gerador (es) de sua escolha

Yeoman usa “geradores” para realmente criar configurações de projeto. O “padrão” é chamado de “gerador-webapp”, mas existem muitos outros que você pode querer dar uma olhada.

Encontre geradores de projeto como este (infelizmente não necessariamente com namespace de alguma forma com “yeoman”, então você obterá falsos positivos):

$ npm search generator

Observe que ao longo de 2013, o yeoman passou por mudanças significativas, então, se um pacote de gerador não foi atualizado desde março ou abril de 2013, você pode querer evitá-lo.

Para obter o gerador de “webapp” padrão, você deseja fazer isso:

$ npm install -g generator-webapp

Você sempre pode instalar outro gerador, por exemplo, para Backbone ou AngularJS, se quiser iniciar um projeto com esses frameworks.

Etapa 4: Crie seu projeto

Crie o diretório do seu projeto e execute o gerador para criar todos os arquivos e pastas de que você precisa para começar. Neste caso, usei o gerador de webapp padrão, que é invocado com o nome “webapp”.

$ mkdir ~/projects/frabulator
$ cd ~/projects/frabulator
$ yo webapp

Muitos geradores farão algumas perguntas sobre exatamente quais recursos você deseja ou precisa. Você sempre pode ajustar isso mais tarde, mas vale a pena acertar se você puder, pois isso significa tornar as coisas rápidas e fáceis!

Etapa 5 … não há Etapa 5

É isso aí. Você verá que muitas coisas foram criadas no diretório e seu projeto está configurado e pronto para ser executado. Mas o que isso significa?

De agora em diante, você usará grunhido (principalmente) e bower (ocasionalmente). Você pode usar o bower para instalar quaisquer novas dependências que desejar, por exemplo “howler” se quiser usar isso para áudio da web.

$ bower install howler

Com muito mais frequência, porém, você usará o grunt para servir (com live reload!), Testar e construir seu aplicativo. Os três comandos a seguir são as coisas mais comuns que você fará daqui em diante:

$ grunt server
# ... this will launch a webserver on port 9000 (by default),
# ... it will launch the index in your browser, and will live
# ... reload if you save changes to some project files
$ grunt test
# ... this will  run your test suite.  Exactly what this
# ... means depends on your app, and the generator you
# ... used, but generally it will run in a headless webkit
# ... "phantom" browser
$ grunt build
# ... run the tests and package your app for distribution,
# ... in 'dist/'

Existem mais comandos grunt integrados. Para se ter uma ideia, você pode consultar o Gruntfile.js que seu gerador criou para você e, obviamente, a documentação do Grunt.js.