Categoria: gulp

Yeoman Generator Gulp Boilerplate

27 de Setembro de 2015

Eu criei um repositório no Github onde mantenho atualizado com um boilerplate para Gulp, o repositório era pra ser pessoal mas eu resolvi compartilhar.

Eu criei um repositório no Github onde mantenho atualizado com um boilerplate para Gulp, o repositório era pra ser pessoal mas eu resolvi compartilhar.

Todo mundo já usou ou já ouviu falar dos pacotes do NodeJS os famosos npm, eu queria saber como fazer um e talvez, quem sabe, criar um pra saber que gostinho tem :)

Eu gosto muito da ideia do Yeoman de poder iniciar um projeto rápido com os seus generators, dai eu pensei: "Porque não fazer o um generator também?"

Dessa ideia que saiu o Generator Gulp Boilerplate.

A documentação do Yeoman é bem simples e fazer um generator é bem fácil, eu realmente não tive dificuldades e com a ajuda do blog do Da2k eu consegui publicar ele no repositório do npmjs.com.

Como usar o Yeoman

Como o Yeoman é um componente do NodeJS então você deve instalar ele com o comando npm install, assim:

sudo npm install -g yo

Com o Yeoman devidamente instalado em sua máquina basta só ir no repositório e escolher o generator que quer instalar, a escolha não vai ser fácil pois atualmente tem mais de 3 mil generators no repositório do Yeoman.

Procure por "gulp-boilerplate" no campo de busca que vc vai encontrar o meu generator por lá..

Após escolher o seu generator basca clicar nele que você irá para o repositório do Github do generator, lá terá a documentação daquele generator, basta segui-la.

Instalando o Gulp Boilerplate

Para instalar o Gulp Boilerplate basta executar o seguinte comando:

sudo npm install -g generator-gulp-boilerplate

Simples e fácil.

Usando um generator

Crie um diretório para trabalhar e entre nele.

mkdir my-project
cd my-project/

Basta executar o generator que foi escolhido e instalado por você basta escrever yo e em seguida o "slug" do generator, assim:

yo gulp-boilerplate

O generator vai criar todo o "start" do projeto pra você, sem reclamar ;)

Yeoman Generator Gulp Boilerplate

Raio-x do Gulp Boilerplate

"Mas afinal o que tem de especial nesse tal Gulp Boilerplate pra me fazer instalar e usar ele?"

Calma jovem, vou listar abaixo todos os pacotes e as tasks do Gulp Boilerplate pra você não ficar ai todo curioso:

Pacotes gulp

Tasks

  • gulp default ou apenas gulp: executa a task gulp serve
  • gulp serve: executa o watch do projeto para os arquivos de .jade, .sass e .js e executa também um servidor usando o browser-sync e toda a vez que um arquivo HTML, CSS ou JS é alterado ele dá o reload nos navegadores.
  • gulp html: usando os pacotes jade e gulp-jade essa tarefa processa arquivos .jade
  • gulp sass: tarefa para executar o pré-processador SASS, aqui usamos o pacote gulp-compass.
  • gulp lint: aqui executamos o lint para aquivos que estão em js/components/ que são os arquinos js de produção.
  • gulp js: essa tarefa usa o pacote gulp-include para incluir arquivos JS como é feito em SASS e emseguida minificar e salvar em dois aquivos FILE.js e FILE.min.js.
  • gulp images: usando gulp-imagemin e imagemin-pngquant reduzimos o tamanho de todas as imagens para produção.
  • gulp fonts: apenas copiamos do diretório /src/fonts/ para dist/assets/fonts/
  • gulp build: faz o build do projeto executando as tasks gulp html, gulp sass, gulp js, gulp images e gulp fonts

Bem, basicamente essa é a forma que eu trabalho com gulp, se você gostou da um like e um fork lá do repositório do projeto e comenta ai em baixo.

Abraço.

/end