Slush, o novo Yeoman

Conheça o novo generator que utiliza Gulp para o scaffolding de seus projetos
Ultimamente tem se falado muito em melhoras no workflow. Cada desenvolvedor tem o seu método de trabalhar. Mas todos possuem algo em comum: acham um saco ter que copiar os arquivos de um lado para o outro para ter que criar um novo projeto. É neste momento que entram os generators.
Yeoman e Boilerplates
Foi pensando nisso que nos últimos anos (2˜3) passaram a surgir vários boilerplates e generators, esse ultimo mais especificamente utilizando o Yeoman. Sim, nossa vida melhorou muito. Cada projeto que iniciamos sempre possui uma estrutura inicial padrão, e agora você não precisa mais copiar e colar arquivos de um lado para o outro.
Se você ainda não conhece o Yeoman, ele é uma stack client-side feito em NodeJS que permite que você crie generators de várias aplicações web, utilizando as mais diversas tecnologias. Atualmente a comunidade já criou quase 700 generators, além dos official generators e também dos que não aparecem em nenhumas dessas listas.
O Yeoman utiliza do Grunt para fazer o scaffolding e do Bower para baixar as dependências dos projetos.
Apesar dos muitos generators, criar um generator exige muito cuidado, além de ler um pouco a documentação do Yeoman.
Com o surgimento do GulpJS, um task runner, assim como o Grunt, foi criado o Slush, um generator que utiliza o Gulp, ao invés do Grunt, além de ter um proposta mais simples.
Começando com o Slush
O Slush depende apenas do GulpJS e de seus plugins. Para quem já mexeu com o Gulp, não terá muita dificuldade. Se você ainda não mexeu com o Gulp, aconselho o artigo do Leonardo Souza, Bye bye Grunt.js, hello Gulp.js!.
Instalando o Slush
Para instalar o Slush, basta ter o NodeJS instalado na sua máquina. Se você já tem, basta instalar o Slush de modo global:
|
Criando seu primeiro generator
Como exemplo, nosso projeto irá gerar um scaffolding para trabalhar com a stack MEAN. Todo generator para Slush deve ter o prefixo slush-. Então vamos criar uma pasta chamada slush-mean e entrar nela:
|
Criação do arquivo package.json
Então primeiro vamos criar um arquivo chamado package.json, parecido com esse:
|
Vale ressaltar dois pontos/linhas importantes nesse arquivo:
- No main devemos colocar o slushfile.js, pois assim como o Grunt e o Gulp, o Slush utiliza um arquivo de configuração próprio. Além do mais, o main é utilizado pelo npm para executar esse arquivo quando o módulo for instalado (veremos isso a seguir).
- Nas keywords é importante o uso da palavra-chave slushgenerator para que seu gerador apareça na lista “oficial”, lá no site do Slush.
Instalar as dependências
Depois que o arquivo package.json foi criado, vamos instalar as dependências:
|
Criar arquivo slushfile.js
Vamos agora criar um arquivo chamado slushfile.js na raiz, junto com seu package.json. O arquivo explica-se por si só, mas depois dele vou colocar algumas observações:
|
Alguns pontos a serem observados:
- Na linha onde tem /templates/ **, é nessa pasta que irá ficar os arquivos a serem “extraidos”
- Note que nas perguntas, existe a opção de colocar uma resposta “default” quando o cara só der ENTER
Criando os arquivos a serem gerados
Essa parte é simples. Coloque dentro da pasta templates tudo que irá ser extraído. E agora vem a parte boa. Quando você quiser “printar” o valor de uma resposta, simplesmente coloque <%= nomeDaVariavelResposta %>
nos arquivos.
Por exemplo, crie eum arquivo chamado package.json
dentro da pasta templates
:
|
Um ponto importante, é que os arquivos lá da pasta templates que começam com .
, como por exemplo o .gitignore
você deverá substituir por _
, ficando assim _gitignore
. Mas não se preocupe, na hora que ele é gerado/compilado, ele se é renomeado para .gitignore
. Isso é feito pelo gulp-rename
para que os arquivos de configuração que começam com o .
, não tenham seu comportamento padrão.
Quando o generator for utilizado, o Slush/Gulp nada mais irá fazer que extrair tudo que está na pasta templates para a raiz e deletar os arquivos que ali estavam (slushfile.js, package.json, …).
Estrutura de arquivos
|
Testando e Publicando no NPM
Para você testar seu gerador, utilize o comando npm link .
, isso irá criar um alias no seu npm/node. Agora você já pode testar seu generator. Crie outra pasta fora dessa estrutura e rode o comando slush mean
. Para publicar nos registros oficias do NPM, utilize o comando npm publish
. Se tiver dúvidas de como publicar um módulo, consulte o próprio site do NPM.
Conclusão
Vimos que com apenas dois arquivos conseguimos construir um generator like a Yeoman, só que bem mais simples. Eu mesmo criei um generator que irei explicar em outro post como foi feito, bem como o modo de usar.
Esse artigo parte do princípio de que você já tenha alguma familiariada com Node, NPM, Task Runner, Terminal entre outras coisas.
Qualquer dúvida, fique a vontade para publicar seu comentário!