Começando um projeto novo com Yeoman

Bom pessoal, o post de hoje é uma dica de como podemos optimizar a criação de novos projetos frontend. Já vimos que o Bower e o Gulp podem ajudar muito durante o desenvolvimento, mas eles ainda precisam ser configurados e isso demanda um tempo.

A dica é Yeoman: A ferramenta de scaffolding para aplicações web modernas.

Yeoman?

Yeoman é uma ferramenta que nos ajuda a criar de forma rápida novos projetos, usando as melhores práticas e ferramentas disponíveis.

Ele possui uma vasta coleção de Generators, que são como modelos da estrutura inicial do projeto (como o Archetype do Maven).

 

Vamos Praticar

Sem mais conversa, vamos testar o que o Yeoman pode fazer. Primeiro, precisamos instalá-lo:

npm install -g yo

Também precisamos instalar o Generator que queros usar. Aqui tem uma lista com todos eles. Para o nosso exemplo, eu vou usar o Gulp Angular.

npm install -g generator-gulp-angular

Agora, pelo console, navegue até o diretório do seu workspace, crie um novo diretório para o projeto.

mkdir ~/workspace/teste-yeoman && cd $_

Importante saber que o próximo comando deve ser executado dentro do novo diretório.

yo gulp-angular

yeoman

A seguir, o Yeoman irá fazer algumas perguntas para configurar o projeto. As perguntas mudam dependendo do Generator escolhido.

Nesse exemplo, ele perguntou:

  • Qual a versão do Angular?
    • 1.4.x
    • 1.3.x
  • Quais módulos Angular você gostaria de ter?
  • Versão do jQuery.
  • Qual biblioteca REST?
    • ngResource
    • Restangular
    • $http
  • Qual biblioteca de router?
    • UI Router
    • ngRoute
    • Angular 2
    • nenhum
  • Qual framework UI?
    • Bootstrap
    • Angular Material
    • Material Design
    • Foundation
    • nenhum
  • Qual o pre-processador de CSS?
    • Sass (Node)
    • Sass (RUby)
    • Kess
    • Stylus
    • nenhum
  • Qual o pre-processador de JS?
    • nenhum
    • ES6 (Babel 6t05)
    • ES6 (Traceur)
    • CoffeeScript
    • TypeScript
  • Qual Template Engine?
    • Nenhum
    • Jade
    • Haml
    • Handlebars

Ok, são muitas perguntas. Mas é bem mais fácil simplesmente responder, do que procurar e instalar cada uma dessas ferramentas 🙂

Depois de responder tudo, o Yeoman começa a criação do projeto. Isso pode demorar alguns minutos.

No fim temos a estrutura inicial do projeto, que você já pode inclusive executar:

gulp serve

Uma amostra do código gerado:

yeoman2

 

Lembrando que também podemos criar nosso próprio Generator. As instruções estão aqui (em inglês).

Conclusão

Com isso vemos que o Yeoman é sem dúvidas uma ótima ferramenta que acelera e até padroniza a criação de novos projetos.

 

E você? Ansioso para começar um novo projeto com Yeoman?

Por FERNANDO FALCI

Postado em: 01 de janeiro de 2016

Confira outros artigos do nosso blog

Como customizar o response da API Rest do WordPress com informações específicas?

23 de julho de 2018

Marcelo Marcelino do Nascimento

A importância de uma boa documentação em projetos de sucesso

06 de julho de 2018

Marcelo Marcelino do Nascimento

Variáveis nativas no CSS: elas existem?

14 de maio de 2018

Patrícia Gomes dos Santos Silva

How-to: Conhecendo o SASS

07 de maio de 2018

Bruno Carvalho

Deixe seu comentário