Começando com Yeoman

Neste jump start vou mostrar como criar diretivas do Angular usando Yeoman.

Mas antes da parte boa, deixe-me introduzir brevemente o Yeoman, ou apenas pule para parte boa.

What’a hell?

Você pode não saber sobre a existência do Yoeman, como eu não conhecia. Nesse caso você deve estar se perguntando “Que m#$%# é essa?”. Yeoman é uma ferramente de scaffolding, que ajuda a desenvolvedores a começar seus projetos, especialmente o tipo web. Ele gera código ordinário, incluindo referências de pacotes bower e npm e scripts de task runners como Grunt e Gulp.

E o queco?

Na realidade é uma solução bem elegante, pois você pode facilmente configurar um projeto com toda uma estrutura, sem ter que ficar copiando código de outros projetos ou reescrever a mesma balela de sempre.

Dessa forma aumenta a sua produtividade e, se usada da forma correta, a qualidade do software ao adicionar ferramentas que você deixaria para traz por “atrasar” o “progresso” do projeto.

Já contém uma coleção de geradores, que cobrem uma boa variedade de soluções. Cada qual requer algumas tarefas usuais ligados ao seu proposito, como testes automatizados, build, watch (livereload), e dependências em comum, como AngularJS, Bootstrap.

No intuito de cobrir essas necessidades, pode gerar referencias para pacotes bower e npm e arquivos Grunt ou Gult para rodar tarefas.

#LetsGetDownToIt

Precisamos de algumas coisas primeiro:

• Instale NPM, nodejs package manager;
• E depois o próprio Yeoman.

npm install -g yo

Agora estamos prontos para começar! Precisamos baixar o gerador do Yeoman para diretiva de Angular.

Você pode encontrar geradores pesquisando no npm por por pacotes com o prefixo “generator”, dessa forma:

npm search generator OQueVocêEstaPesquisando

Nessa caso em especifico, vamos precisar procurar a diretiva do angular, então pesquisamos dessa forma:

npm search generator directive

Com o nome do pacote em mãos nós instalamos ele.

npm install generator-angular-directive -g

Os pacotes npm com o prefixo “generator-“ nomeiam templates do yo. Para rodar o gerador recentemente adicionado, nós apenas retiramos o prefixo e passamos como argumento para o Yeoman. Antes disso, garanta que já esta na pasta do projeto.

mkdir ng-yomanDirective
cd ng-yomanDirective
yo angular-directive

Agora que a magica acontece! O Yeoman irá perguntar algumas configurações para gerar de forma mais conveniente o projeto.

Esse template irá o nome que você quer dar para diretiva e o sue nome no github.

Então irá criar a solução com: * Uma configuração para, rodar os teste e o servidor em em live mode; * Configuração para Testes automatizados com karma e jasmine; * configuração para integração continua usando Travis.

Essas são as coisas que você precisa para começar a desenvolver.

Com a solução preparada, rode as seguintes linhas para instalar as dependência:

npm install -g gulp
npm install -g bower
npm install
bower install

Para rodar o live reload demo rode:

gulp serve

E para desenvolver usando TDD, procurando sempre se manter no verde, rode:

gulp test