Harvest: Boilerplate de Gulp para seus projetos

Não importa qual o Task Runner você usa. Muitos gostam de Grunt, outros de Gulp, outros usam Rake e todos tem o seu encanto e seus truques. Já usei muito Grunt, mas ultimamente tenho experimentado o Gulp. Cara… como é rápido. Por isso, tive a grande ideia de criar um boilerplate para os meus projetos, onde eu consigo rapidamente concatenar os assets, otimizar imagens, criar source maps dos arquivos SASS, subir um servidor e várias outras coisas.

Mas antes de iniciar a criação desse boilerplate, obviamente, procurei se alguém não já teve essa ideia e feito esse trabalho para mim. Foi aí que eu achei o Harvest.

O Harvest é um boilerplate Gulp que te ajuda a fazer uma série tarefas rotineiras como:

• Levantar um servidor na porta 3000
• Live Reload usando o BrowserSync
• Build do projeto
• Conversão do SCSS com Source Maps
• Concatenação e minificação do CSS e JS
• Compressão e Otimização de imagem

A instalação é fácil:

• Faça o download ou o clone do projeto
• Rode npm install para instalar as dependencias.
• Rode gulp para iniciar o servidor, o live reload e o watch dos assets.
• Abra o browser em https://localhost:8080 para ver seu servidor local e o live reload do projeto
• Rode gulp deploy para fazer o build seu projeto

Alguns dos módulos usados para fazer esse boilerplate são:

• Gulp Auto Prefixer insere os prefixos dos browsers no seu CSS automaticamente
• Gulp Concat Concatena o JS e o CSS em um arquivo.
• Gulp Connect Cria um servidor local para o desenvolvimento faz o reload quando você muda e salva um arquivo.
• Gulp ImageMin Minifica as imagens.
• Gulp SASS Biblioteca do SASS sem a dependência do Ruby.
• Gulp SourceMaps Adiciona os arquivos de source maps para facilitar o debug do SASS
• Gulp Uglify Uglify de JS.
• Gulp Shell Ajuda na criação e limpeza de diretório de build
• Gulp Sequence Organiza e roda as tarefas de build em uma sequência definida.
• BrowserSync Sincroniza vários browsers e executa o live reload da página.
• Gulp Minify CSS Minifica o CSS.

A documentação ainda está sendo escrita, mas acho que você vai conseguir se virar bem.