Nesse artigo vou falar um pouco sobre essa ferramenta de automação de tarefas, que faz parte do ecossistema da plataforma Node.js. Vou falar um pouco o que é o Gulp, o que ele pode fazer para facilitar a nossa vida, as suas características principais, como instalar e mostrar que, com poucas linhas de código, é simples criar tarefas.

O que é o Gulp?

O Gulp é um automatizador de tarefas rápido na sua execução, simples de usar e de fácil aprendizado. Ele usa como base a plataforma node.js para interpretar seu código e requer conhecimento de Javascript para criar suas tarefas.

Essas tarefas podem ser qualquer coisa que você precisa fazer de forma repetida ou que vai consumir muito do seu tempo. Por exemplo, minificar imagem, copiar diretórios, concatenar arquivos, compilar Javascript etc. Todas essas são tarefas que, se forem feitas manualmente, irá consumir muito tempo e trabalho; e o Gulp cuida de tudo isso.

Características do Gulp

1. Fácil de usar: Com uma instalação simples e poucas linhas de código, você executa processos
   trabalhosos com apenas uma linha de comando;
2. Eficiente: Aproveita a tecnologia Stream do Node.js, sem construir arquivos intermediários em
   disco e usa o mecanismo de pipeline do unix;
3. Fácil de aprender: Basicamente sabendo um pouco sobre o mecanismo de pipeline do unix,
   Javascript e entendendo a estrutura do gulpfile que é simples, você estará pronto para criar tarefas.

Qual problema ele pode resolver?

A ferramenta veio para trazer soluções de todos os tipos. Posso criar o build do sistema, tarefas para rodar testes unitários, configurar deploy e também criar ambiente de desenvolvimento completo.

Falando um pouco sobre criar um ambiente de desenvolvimento, o Gulp permite programar um ambiente com todas as ferramentas para monitorar, compilar, processar imagens e ainda levantar um servidor local onde você visualiza o resultado em tempo desenvolvimento. Ter uma ferramenta desse tipo é a alegria de todo desenvolvedor front-end, que não só ajuda na produtividade, mas também traz uma nova experiência de desenvolvimento de sistemas web.

Como instalar e usar

Vamos partir do princípio de que você já tem o Node e o npm instalado na sua máquina. Agora vamos instalar o Gulp de forma global no sistema:

# npm install -g gulp

Crie um diretório e inicie um projeto com o npm:

# mkdir meu_projeto
# npm init

O npm vai iniciar uma série de perguntas para criar o arquivo de configuração do projeto, responda todas as perguntas e depois disso crie um arquivo chamado gulpfile.js dentro da pasta do projeto, nesse arquivo é onde programamos todas as tarefas que o Gulp executará.

Segue uma tarefa bem simples que o Gulp pode fazer:

var gulp = require('gulp');

gulp.task('copy:pasta',function() {
	gulp.src('src/**/*')
		.pipe(gulp.dest('build'));
});

gulp.task('default',['copy:pasta']);

Na primeira linha, instanciamos o modulo do Gulp. Já na segunda criamos uma tarefa para copiar tudo que está dentro da pasta src para pasta build.

Na terceira linha criamos uma tarefa padrão, quando chamamos o comando Gulp, sem parâmetro algum, a tarefa default será chamada.

Para executar a tarefa rode o comando:

# gulp

Bem simples, não?!

Agora vamos imaginar que temos arquivos less para compilar em um diretório e também vamos concatenar somente os arquivos Javascript que está em outro diretório. Vamos lá.

Primeiro vamos precisar de dois plugins o Gulp-less e o Gulp-concat. O Gulp-less vai compilar código less para CSS; já o gulp-concat é responsável em concatenar arquivos.

Para executar essa tarefa vamos precisar da instalação desses dois plugins:

# npm install –save-dev gulp-less
# npm install –save-dev gulp-concat

O código para usar os plugins no gulpfile:

var gulp = require('gulp');
var less = require('gulp-less');
var concat = require('gulp-concat');

gulp.task('compile:less', function() {
	return gulp.src('src/less/**/*.less')
		.pipe(less())
		.pipe(gulp.dest('build/css'));
});

gulp.task('concat:js', function() {
	return gulp.src('src/js/**/*.js')
		.pipe(concat('all.js'))
		.pipe(gulp.dest('build/js'));
});

gulp.task('default',['compile:less','concat:js']);

Na primeira parte, instanciamos o módulo do Gulp e os plugins. Na segunda linha, criamos uma tarefa com o nome compile:less. Tudo que estiver na pasta src/less com a extensão .less, o Gulp compilará e direcionará para build/css.

Na terceira linha criamos uma tarefa com o nome concat:js. Tudo que estiver na pasta src/js com a extensão .js, o Gulp irá compilar e direcionar para build/js.

Para rodar a tarefa novamente, execute no console o comando:

# gulp

Veja que o Gulp é uma ferramenta que traz muitos benefícios. A ideia é resolver aquele problema trabalhoso e repetitivo de maneira rápida e simples, sem muita complicação. E isso o Gulp resolve de forma excelente.

A ferramente pode ir muito além do que descrevi. Existe um universo gigante de plugins para facilitar mais ainda a criação e processamento de tarefas; são plugins que fazem minificação, compilação, processamento de imagens, testes unitários etc. Entendendo o funcionamento e a estrutura do gulpfile, cabe a sua criatividade criar soluções para suas necessidades, então, aproveite o poder dessa ferramenta e divirta-se.