Conhecendo Gulp

Antes de explicar e demonstrar o poderoso automatizador de tarefas, Gulp, preciso explicar o que é um automatizador de tarefas.

O que é Automatizadores de Tarefas?

Existem alguns processos (tarefas) de desenvolvimento que se torna repetitivo e chato ter que fazer sempre, por exemplo, no Stylus. Caso não saiba eu espero você ler este meu artigo Colocando Stylus no seu site.

Pronto? Leu? Legal, agora que viu e sabe sobre o Stylus, imagina ter que rodar isso toda vez. Depois disso você quiser que todo esse CSS fique minificado.

Caso você tenha 10 tarefas como o pre-processador Stylus, vai ter que rodar 10 comados diferentes em seu terminal?

Se até agora fazia isso, pare agora.

GULP

Temos diversos outros, como GRUNT, seu principal concorrente. Porém quero apenas falar e demonstrar o Gulp.

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something (Doc Gulp).

Instalação

O Gulp roda em Nodejs, então sim, você terá que ter ele em sua maquina.

Para instalação do Gulp vamos rodar o famoso comando NPM

npm install -g gulp

Se já conhece um pouco de Nodejs, perceberá que o rodamos com o -g, ou seja, instalamos o Gulp globalmente.

Rode o comando para ter certeza que o gulp foi instalado

gulp -v

Caso não mostre a versão, significa que não intalou, então tente instalar com sudo.

Iniciando nosso projeto

|projeto/
|--src/
|----source.js
|--stylus/
|----main.styl
|--Gulpfile.js

Agora vamos começar. Rode em seu terminal o comando npm init.

Será solicitado algumas informações, você pode inserir como preferir:

package-name: gulp_learning
version: 1.0.0
description: To learning Gulp
entry point: index.js
test comand: _(enter)_
git repository: _(enter)_
keywords: gulp, es5, es6, stylus
Author: Douglas Porto
license: ISC

Agora temos um package.json assim:

{
  "name": "gulp_learning",
  "version": "1.0.0",
  "description": "To learning Gulp",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp",
    "es5",
    "es6",
    "stylus"
  ],
  "author": "Douglas Porto",
  "license": "ISC"
}

Instalando plugins

Vamos utilizar o NPM mais uma vez rodando o comando:

npm install @babel/core @babel/preset-env gulp-stylus --save-dev

Agora inclua o programa .babelrc e dentro dele faça:

{
  "presets": ["@babel/preset-env"]
}

Começando a brincadeira

Agora sim podemos começar a brincar com o Gulp

Antes de tudo no arquivo gulpfile.js precisamos incluir o gulp.

var gulp = require("gulp")

A váriavel gulp comtém o objeto com as funções necessárias para podermos confirgurar nossas tarefas (task).

Chamaremos então uma função que esta no objeto, chamada task. Está função recebe 2 parametros, 1º o nome da tarefa, o 2º uma função.

var gulp = require("gulp")

gulp.task("teste", function() {
  console.log("Gulp Funcionando")
})

Rode em seu terminal gulp teste.

Você receberá 3 informações:

  • [Hora] Starting 'teste' (Informação da hora e nome da task iniciada)
  • Gulp Funcionando (console.log da função)
  • [Hora] Finished 'teste' (Informação da hora e nome da task finalizada)

ES6 para ES5

Importe o babel para as configurações do Gulp

var babel = require("gulp-babel")

Na função do nosso task teste vamos colocar a seguinte sintexe:

gulp.task("teste", function() {
  return gulp
    .src("./src/index.js") // Arquivo(s) que será lido
    .pipe(babel({ presets: ["@babel/preset-env"] })) //Plugin babel para a compilação do ES6
    .pipe(gulp.dest("dist")) // Destino para qual irá o arquivo após compilado
})

Vamos testar se funciona.

No arquivo ./src/index.js vamos escrever uma arrow function do ES6

var a = b => b

Rode o gulp teste e veja a mágica acontecer rs.

var a = function(b) {
  return b
}

Agora só para organizarmos melhor nosso projeto, vamos trocar o nome da task teste para es5

Copilando CSS com Stylus

Vamos criar uma nova task com nome de stylus. Assim como na task anterior, devemos passar o caminho que deve obeservar, a função que deve executar e por fim o caminho destino.

gulp.task("stylus", function() {
  return gulp
    .src("./css/style.styl")
    .pipe(stylus())
    .pipe(gulp.dest("./dist/css/"))
})

No nosso ./css/style.styl vamos deixar desta forma para teste.

.container {
  .row {
    div {
      background: black;
    }
  }
}

Agora rodamos o gulp stylus e temos:

.container .row div {
  background: #000;
}

Watch e Default

Imagina que saco ter que digitar no terminal toda vez gulp es5 depois gulp stylus. Que automatizador de tarefas é esse?

Para isso que existe o default, veja:

gulp.task("default", ["es5", "stylus"])

Rode apenas gulp e voilà.

Porém, toda alteração que executar no seus códigos terá que rodar gulp?

O watch fica observando os programas e assim que salva-los, ele executará a tarefa definida, veja:

gulp.task("watch", function() {
  gulp.watch("./src/index.js", ["es5"])
  gulp.watch("./css/style.styl", ["stylus"])
})

Rode gulp watch e teste.

Incrível não? Agora junte o Default com o Watch e pronto.

gulp.task("default", ["es5", "stylus", "watch"])

Agora ao rodar gulp ele fará o es5, depois o stylus e começará a observar com o watch.

Bom, é isso ai galera. Este foi um exemplo muito simples de como funciona o Gulp. Conhece outras coisas que da para fazer com ele? Coloque aqui embaixo e vamos conversar!

Encontrou algum erro? Pow... me ajuda ae!😁

Como esse blog é open source, então é só alterar o arquivo de texto, no próprio Github e abrir um pull-request. Simples não?

Quer conhecer mais meu trabalho? Sigam-me os bons!!!😜🚀

- Twitter: @dgsapenas
- Github: @douglasporto
- Linkedin: @douglas-porto

Comentários