A criação de um novo projeto pode ser bem exaustiva... Não digo isso pela questão do projeto ser do zero, isso na verdade é bastante estimulante, o que é torna exaustivo é fazer toda a configuração do zero de um projeto assim.
Para exterminar este problema (pelo menos para o desenvolvimento inicial do projeto)o Yeoman está aqui para ajudar..
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 para 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
Parece bem top 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:
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 será necessário instalar ambos basta executar os seguintes comandos:
````npm
npm install — global gulp-cli bower generator-webapp
```
Com tudo instalado, vamos criar o nosso projeto. Para isso, execute:
````npm
yo webapp
```
Este comando fará com que o Yeoman procure pelo gerador webapp e o inicie. Logo de cara, ele te fará algumas perguntas, como qual versão do Bootstrap (esse pacote possui Boostrap) você quer usar 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:
Agora podemos executar `gulp serve` para iniciar o projeto localmente:
E pronto, o projeto está preparado para desenvolvimento! (confira a documentação do gerador para ver mais comandos).
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.
Fontes onde pesquisei esse conteúdo:
- https://yeoman.io/
- https://yeoman.io/authoring/
- https://yeoman.io/learning/index.html
- https://yeoman.io/codelab/index.html
- https://github.com/yeoman/generator-webapp
Top comments (0)