Iniciando com o Gulp

Introdução

O Gulp.js é uma ferramenta de automação de tarefas em JavaScript. Tarefas como minificar, otimizar e compilar arquivos, tão repetitivas e necessárias ao desenvolvimento, podem ser automatizadas com o Gulp, levando sua produtividade a um outro nível.

Nós dois tivemos nosso primeiro contato com a ferramenta meses atrás, durante o curso de Desenvolvimento Web da Cod3r e, desde então, temos utilizado esse Task Runner sempre que possível.

Apesar de reforçarmos a importância de um automatizador de tarefas para quem desejar seguir carreira no desenvolvimento front-end, entendemos que a própria documentação do Gulp ser um pouco complicada para iniciantes, por isso decidimos, juntos, escrever esse post, onde buscaremos introduzir de forma clara como utilizar essa ferramenta.

Instalando o Gulp

Assumindo que você já tenha o Node instalado na sua máquina, abra o terminal e rode o seguinte comando:

npm install -g gulp

//ou

yarn global add gulp

Agora você já tem o Gulp instalado de forma global! Para utilizá-lo em seus projetos, instale-o com uma dependência de desenvolvimento:

npm install --save-dev gulp

//ou

yarn add gulp -D

gulpfile.js

Nesse arquivo, que deve ficar na raiz do projeto, é onde os scripts automatizados das tarefas estão escritos e onde os comandos sobre o que fazer, e como fazer, são passados para o Gulp.

Nós montamos um arquivo gulpfile.js de exemplo, e explicaremos o código passo a passo.

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    minifycss = require('gulp-minify-css'),
    livereload = require('gulp-livereload');
    imagemin = require('gulp-imagemin');

gulp.task('scss', function() {
  sass('css/style.scss').on('error', sass.logError)
  .pipe(minifycss())
  .pipe(gulp.dest('css'))
  .pipe(livereload());
});

gulp.task('image', function() { 
    gulp.src('images/**/*') 
    .pipe(imagemin()) 
    .pipe(gulp.dest('images')) 
});

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('css/*.{sass,scss}', ['scss'] );
  gulp.watch('images/**/*', ['image'] );
});

O Gulp possui vários módulos para automatizar tarefas diferentes e todos eles requerem o módulo ‘gulp’. No exemplo acima, utilizamos um módulo para converter SASS para CSS, um para minificar CSS e um para LiveReload. Para instalá-los, execute o seguinte comando no seu terminal:

npm install --save-dev gulp-ruby-sass gulp-minify-css gulp-livereload

// ou

yarn add gulp-ruby-sass gulp-minify-css gulp-livereload -D

Ao finalizar a instalação, devemos carregar os módulos no nosso arquivo gulpfile.js:

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    minifycss = require('gulp-minify-css'),
    livereload = require('gulp-livereload');

Criando tarefas

Agora podemos criar nossa primeira tarefa automatizada com o Gulp. Ela se chamará scss e sua função será converter SASS para CSS, minificar o CSS e trazer a alteração feita no código .scss em tempo real. Para alterações em tempo real, utilizaremos o LiveReload.

gulp.task('scss', function() {
      sass('css/style.scss').on('error', sass.logError) // 1
      .pipe(minifycss()) // 2
      .pipe(gulp.dest('css')) // 3
      .pipe(livereload()); // 4
    });

O que acabou de acontecer no código acima? É mais simples do que parece!

1. Dentro da função sass() colocamos o diretório aonde nosso código .scss ou .sass está;
2. Pegamos o css convertido e minificamos (essa palavra existe?) com o minifycss();
3. Salvamos o arquivo .css dentro da pasta css;
4. Fazemos com que a página seja recarregada automaticamente.

Um passo muito importante ao utilizarmos o Gulp é criarmos a nossa tarefa principal, por conveção chamada de watch.

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('css/*.{sass,scss}', ['scss'] );
});

O código acima irá observar os arquivos .sass e .scss dentro da pasta css e ativer o LiveReload. No segundo parâmetro da função watch, passamos a task que será invocada ao modificarmos os arquivos passados no primeiro paramêtro, ou seja, quando os arquivos .sass e .scss forem modificados, o Gulp rodará a task scss, que criamos anteriormente.

Otimizando imagens

Agora que você já está familiarizado(a) com a ferramenta, iremos criar outra tarefa, a otimização de imagens com o gulp-imagemin. Para começar, devemos instalar o plugin nas nossas dependências:

npm install --save-dev gulp-imagemin

// ou

yarn add gulp-imagemin -D

Agora devemos adicioná-lo aos nossos requires:

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    minifycss = require('gulp-minify-css'),
    livereload = require('gulp-livereload');
    imagemin = require('gulp-imagemin');

E agora podemos criar nossa task:

gulp.task('image', function() { //gulp.task() define uma nova tarefa
    gulp.src('images/**/*') //informamos de onde virá a entrada
    .pipe(imagemin()) //tratamos os dados com a função do gulp-imagemin
    .pipe(gulp.dest('images')) //enviamos as imagens tratadas para o seu destino
});

O nosso gulpfile.js está pronto para otimizar imagens, então vamos adicionar a nossa nova task ao watch que criamos anteriormente.

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('css/*.{sass,scss}', ['scss'] );
  gulp.watch('images/**/*', ['image'] );
});

Rodando o gulp

Já criamos nossas primeiras tarefas, agora é hora de ver o Gulp em ação! Salve o arquivo gulpfile.js, abra o terminal na pasta do seu projeto e execute o seguinte comando:

gulp watch

Para testar se o Gulp está funcionado, altere o seu arquivo .sass ou .scss e salve as modificações. Ressaltando que para o LiveReload funcionar você deve instalar a sua extensão no Google Chrome!

Conclusão

Espero que tenha ficado claro a importância de um automatizador de tarefas e o ganho de produtividade que ele pode trazer para o desenvolvimento do seu projeto! Apesar de termos trazido dois exemplos bem simples, o Gulp é capaz de fazer coisas incríveis, por isso recomendamos muito que vocês se aprofundem na ferramenta.

Sugestões, dúvidas ou críticas, deixem aqui nos comentários!