Gulp

Desenvolvedores web front-end possuem todo um fluxo de trabalho para seus projetos, que envolvem tarefas como compilar CSS de pré-processadores, verificar erros de JavaScript, combinar e minificar assets, otimizar imagens, enfim, tarefas necessárias que fazem parte de qualquer workflow minimamente profissional.

Há anos já existem ferramentas de automatização de tarefas (neste meio, conhecidos como task runners), tais como o já apresentado Grunt. Mas ele não é o único. Recentemente surgiu outro automatizador de tarefas para fazer frente ao Grunt e, como se verá mais à frente, que possui muitas vantagens. Seu nome? Gulp.

Gulp: the streaming build system

Como citado, geralmente este tipo de ferramenta é conhecida como “automatizador de tarefas”, “executor de tarefas”, dentre outros termos do gênero; o Gulp, que também é desta mesma “linha”, se autointitula um build system, algo como um “sistema de construção” ou “sistema de compilação”.

Na prática, seu motivo de existir é o mesmo que do Grunt: ajudar desenvolvedores front-end com tarefas necessárias-repetitivas e, com isso, prover maior velocidade/rapidez no desenvolvimento de um projeto e liberar nossas mentes para focar no que realmente importa. E preste bastante atenção na palavra “velocidade”.

Velocidade. Eficiência. Simplicidade.

Como consta no próprio site oficial do Gulp, estes são os 3 princípios que o norteiam. Caso você já esteja mexendo com Grunt e passar para Gulp (nem que seja para testar), você vai sentir o poder destas 3 palavras na prática!

As características principais do Gulp são:

• Fácil de usar. Ao preferir código ao invés de configuração, Gulp mantém simples o que é simples e faz tarefas complexas mais bem administráveis.
• Eficiente. Gulp usa o poder de streams do Node, o que permite builds muitos mais rápidos e dispensa a necessidade de gravação de arquivos intermediários em disco.
• Alta qualidade. As diretrizes estritas para plugins do Gulp garantem que seus plugins permaneçam simples e trabalhem da maneira que se espera.
• Fácil de aprender. Com uma API mínima, aprende-se a trabalhar com o Gulp quase que na hora!

Código ao invés de configuração (“code over configuration”) significa que realmente é preciso programar, montar scripts. Pare para pensar: um Gruntfile, por exemplo, é tão-somente um arquivo com um monte de configuração de tarefas, indicando o que estas devem fazer e de que maneira. Com Gulp, o fluxo de tarefas é programado.

A eficiência do Gulp muito se dá em função de este usar Streams do Node. Tecnicamente, Stream é uma interface abstrata implementada por vários objetos, mas pense neles como os pipes de sistemas *NIX, em que é possível jogar a o resultado de um comando diretamente em outro.

Sua alta qualidade e facilidade de aprendizado garantem plugins igualmente eficientes e, devido ao próprio modo como o Gulp funciona, sua facilidade de aprendizado e uso são absurdos; é uma curtíssima (quase inexistente) curva de aprendizado para começar a mexer com uma das mais poderosas ferramentas de desenvolvimento web que surgiram nos últimos tempos!

Como instalar Gulp

Gulp é JavaScript com Node, então, a primeira coisa que você vai precisar é instalar o Node. Tomando por base que você está mexendo num sistema de gente grande, isso é tão simples quando digitar uma linha de comando no Terminal (caso já até não o tenha instalado). Depois disso, instale o Gulp globalmente no sistema com npm install -g gulp.

Já que estamos lidando com Node, um arquivo package.json na raiz do projeto se faz necessário para indicar quais módulos serão usados no projeto. É possível que o Node crie esse arquivo automaticamente com npm init, o que que iniciará um prompt interativo que vai perguntar um monte de coisas (tais como nome do projeto, versão, descrição, licença, autor, etc). Na verdade, para começar a adicionar módulos, tudo o que é preciso é que esse arquivo seja um JSON válido (mais sobre isso no artigo JSON - JavaScript Object Notation), e um JSON válido mínimo não passa de "". Então, se quiser ser mais prático, basta executar echo "{}" > package.json.

Já com o package.json na raiz com um JSON válido, execute npm install --save-dev gulp para instalar o Gulp para o projeto.

Revisando:

• npm install -g gulp
• echo "{}" > package.json
• npm install --save-dev gulp

Depois disso, seu package.json deve estar assim:

{
  "devDependencies": {
    "gulp": "~3.5.5"
  }
}

Como você viu, para instalar módulos o comando é npm install --save-dev [MÓDULO]. Na verdade, a instalação, propriamente dita, dispensa o uso de --save-dev, mas usar este parâmetro garante com que a definição do módulo seja gravada no package.json e isso torna as coisas mais fáceis ao se iniciar um projeto que usa Gulp.

Não é preciso incluir o diretório node_modules no controle de versão, já que, ao se clonar um projeto que tenha um package.json, basta executar npm install para que ele seja criado automaticamente já com os módulos/dependências que serão usados.

gulpfile.js

Agora que o básico para se mexer com Gulp está preparado, é hora do gulpfile.js. Neste arquivo, que também deve ficar na raiz, é que os scripts das tarefas instaladas constam; é aqui, efetivamente, que os comandos sobre o que fazer e como fazer são passados para o Gulp.

Um boilerplate para o gulpfile.js poderia ser:

var gulp = require('gulp');

gulp.task('default', function() {
    // Tarefas
});

Primeiramente, requere-se o módulo “gulp” (isso deve ser feito com todos módulos que você pretende usar). Depois cria-se uma tarefa default com as instruções que serão realizadas quando esta tarefa for executada. Do jeito que está, você já pode executar no Terminal: gulp.

Apesar de ser uma tarefa nada útil, ela já deve retornar algo como: