Se você está lendo este artigo, provavelmente tem uma opinião muito semelhante a minha no que diz respeito a criação de um novo projeto: é um saco. Não digo isso pela questão do projeto ser do zero, isso na verdade é bastante estimulante, o que é bem chato é fazer toda a configuração de um projeto assim.

Para exterminar este problema (pelo menos para o desenvolvimento inicial do projeto), comecei a minha busca por uma ferramenta que ajudasse e acabei me deparando com o Yeoman.

Os mil e um geradores do Yeoman

De acordo com a descrição do próprio site oficial, o Yeoman é uma ferramenta que nos ajuda a dar o pontapé inicial em novos projetos, prescrevendo práticas recomendadas e ferramentas para nos ajudar a ser mais produtivos. Ele faz tudo isso através de um ecossistema de geradores.

Em resumo, cada gerador é uma ferramenta customizada construída em cima da arquitetura do Yeoman para gerar um resultado desejado. Isso significa que os geradores não estão associados a uma única tecnologia, muito pelo contrário, há mais de 7000 geradores dos mais diversos tipos, que vão do JavaScript até o PHP. Estes são alguns deles:

  • React FullStack (14000 estrelas) — React.js com ES6+, Babel, Express, Webpack, BrowserSync configurados.
  • jhipster (10000 estrelas) — Spring Boot + Angular
  • React Native Ignite (7500 estrelas) — Projetos React Native
  • Angular FullStack (6000 estrelas) — MEAN Stack (MongoDB, Express, AngularJS, e Node)

A verdade é que pra qualquer tipo de projeto, seja em Java, PHP ou C, com certeza alguém já criou um gerador adequado para ajudar. Para entender melhor como isso tudo funciona, vamos criar juntos um pequeno projeto web utilizando a ferramenta.

Criando um site com o gerador

Para este artigo, criaremos uma pequena aplicação web utilizando o yeoman/generator-webapp. Este gerador tem mais de 3400 estrelas no GitHub e é um dos geradores mais bem avaliados na plataforma. Ela nos dá uma série de funcionalidades interessantes, tais como:

  • ES6+ através do Babel
  • CSS Autoprefixing
  • Built-in preview server através do Browsersync
  • Compilação de SASS com o libsass
  • Lint “automágico” dos scripts
  • Source Maps
  • Otimização de imagens
  • Gerenciamento de dependências com o Bower
  • Testes utilizando o Mocha (ou Jasmine)
  • E muito mais

Parace bem bacana, né? Mas antes de conseguir utilizar tudo isso, precisamos ter o Yeoman instalado na nossa máquina. Para isso, execute o seguinte comando no terminal:

npm install — global yo

Se tudo der certo, você verá uma tela semelhante a esta:

Instalação no Yeoman através do npm

Com a ferramenta instalada, precisamos agora baixar as dependências do gerador (cada gerador conterá instalações/dependências diferentes). O gerador que escolhemos utiliza o Gulp e o Bower. Então, para instalar tudo o que é necessário, execute o comando:

npm install — global gulp-cli bower generator-webapp

Com tudo instalado, vamos criar o nosso projeto. Para isso, execute:

yo webapp

Este comando fará com que o Yeoman procure pelo gerador webapp e o dispare. Logo de cara, ele te fará algumas perguntas, como qual versão do Bootstrap você quer usar (leia nosso artigo sobre o Bootstrap 4 clicando aqui!) e quais outras funcionalidades você quer incluir no projeto (SASS, Modernizr, etc). Se tudo ocorrer como esperado, após alguns minutos você terá um projeto com a seguinte estrutura:

Estrutura do projeto criado com o gerador do Yeoman

Agora podemos executar gulp serve para subir o projeto em desenvolvimento:

Página web responsiva criada utilizando o Bootstrap 4 e o Modernizr

E pronto, o projeto está preparado para desenvolvimento! (confira a documentação do gerador para ver mais comandos).

Conclusão

O Yeoman foi criado para ser um facilitador na criação e configuração de novos projetos de software e faz este papel muito bem. Sua grande sacada está no seu amplo ecossistema de geradores, possível graças a sua arquitetura, que permite a qualquer desenvolvedor(a) criar um gerador para um projeto, independente da ferramenta e/ou linguagem.

Referências


Gostou? Recomende 👏 este artigo e acompanhe nossa publicação para não perder os próximos conteúdos!

Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.brFacebook, Twitter, Youtube

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Diego Martins de Pinho

Written by

Desenvolvedor de Software, Fundador da CodePrestige e autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade