# Gulp

> Gulp: automatize tarefas de desenvolvimento front-end. Configure build, minificação, otimização de assets e workflow eficiente com JavaScript. Automatize!

URL: https://dpw.dev/javascript/gulp/  
Publicado em: 2014-03-10  
Categoria: javascript  
Tags: analise, ferramentas, performance, planejamento  
Autor: Tárcio Zemel

![Gulp](/images/blog/gulp/gulp.webp)

**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](/javascript/grunt-ferramenta-de-construcao-build-tool-para-projetos-front-end/). 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](/javascript/grunt-ferramenta-de-construcao-build-tool-para-projetos-front-end/): 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](http://gulpjs.com/), 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](http://nodejs.org/api/stream.html). 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](http://nodejs.org/). 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](/javascript/json-javascript-object-notation/ "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:

```json
{
  "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:

```javascript
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:

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml