Gulp direto ao ponto: fluxo de trabalho para iniciantes

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. Porém, como tantas outras ferramentas úteis de tecnologia, Gulp não tem um “guia para iniciantes” propriamente dito. O guia oferecido assume algum conhecimento prévio a respeito do ambiente e instalação de pacotes. Se você já sabe como Node e npm funcionam e tem tudo instalado, ótimo — mas os novatos só ficarão mais confusos e frustrados.

Vou resumir rapidamente alguns conceitos importantes:

Node.js — um ambiente que permite a execução JavaScript no lado do servidor, para a web.
Npm — um gerenciador de pacotes para Node.js. Uma ferramenta que permite configurar rápida e facilmente ambientes e plugins Node localmente.
Local vs. Global — Node.js é instalado globalmente, mas Gulp e todos os seus plugins serão instalados localmente, por projeto.
Executor de Tarefa — Um executor de tarefa como Gulp automatiza todos os seus processos para que você não tenha que pensar sobre eles. O Gulp requer um pacote.json e gulpfile.js.

Passos

  1. Instalar Node.js
  2. Instalar Gulp globalmente
  3. Instalar Node e Gulp localmente
  4. Instalar plugins do Gulp
  5. Configurar o projeto

1. Instalar Node.js

Acesse https://nodejs.org/ e procure a melhor forma de instalar o Node para você. Node.js é o ambiente JavaScript do lado do servidor no qual o Gulp é executado. O npm está incluído no Node.

Para checar se o Node está instalado, abre a linha de comando e digite:

node -v

2. Instalar Gulp globalmente

Hora de instalar o Gulp globalmente. Esta é a última etapa global antes de começar a instalar as coisas localmente, por projeto. Na linha de comando, digite:

npm install --global gulp-cli

Este é o fim da instalação global! Nenhum destes passos terá de ser repetido. A partir daqui, vamos começar a configurar o nosso projeto local.

3. Instalar Node e Gulp Localmente

A partir deste ponto, você terá que navegar até a pasta na qual você manterá seu projeto. C:/projetos/sites por exemplo. Use cd (change directory) para mudar de diretório e mkdir (make directory) para criar diretórios.

Para instalar o Node localmente, você precisa de um arquivo package.json. Você pode fazer esse arquivo manualmente, ou gerar um. Vamos gerar um para que você tenha uma ideia de como ele funciona. Digite na linha de comando:

npm init

Este comando irá guiá-lo através da criação de um package.json genérico. É bastante direto, mas simplesmente pressione enter se você não tiver certeza ou não quiser preencher algo. Eu apenas dei uma descrição, palavras-chave e autor, e o arquivo foi gerado.

{
"name": "site",
"version": "1.0.0",
"description": "Iniciando com Gulp",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"gulp",
"sass"
],
"author": "Fernanda Leite",
"license": "MIT"
}

Agora vamos executar um comando para instalar Gulp localmente.

npm install --save-dev gulp

Após terminado, você verá que um diretório node_modules foi criado. Para o bem de sua própria sanidade, evite descer até o buraco de coelho chamado node_modules; Você pode nunca encontrar seu caminho de volta.

4. Instalar Plugins do Gulp

Neste ponto, em nosso diretório node_modules, o único devDependency que temos instalado é Gulp. A fim de concluir a mágica, precisamos instalar os plugins do Gulp. Há um monte deles. Mas para o bem deste artigo, vamos instalar quatro para o nosso fluxo de trabalho de desenvolvimento front-end.

  1. Gulp Sass, para compilar SCSS para CSS.
  2. Gulp Autoprefixer, para adicionar prefixos dos browsers nas regras CSS.
  3. Gulp cssnano, para minificar e otimizar CSS
  4. Gulp Sourcemaps, porque é praticamente impossível depurar um CSS minificado.

Isso já fará um fluxo de trabalho agradável — você pode escrever SCSS sem se preocupar com a adição de prefixos ou minificar manualmente o código, e sourcemaps irá ajudá-lo a encontrar onde o CSS se origina em seus arquivos. Instale os quatro de uma vez com:

npm install --save-dev gulp-sass gulp-autoprefixe rgulp-cssnano gulp-sourcemaps

Se você verificar o seu package.json, você notará que uma nova seção foi adicionada.

"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-cssnano": "^2.1.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.0"
}

Estes são todos os pacotes do Node que você instalou.

Para referência futura, você pode simplificar o processo inserindo devDependencies no seu package.json inicialmente. Depois disso, basta digitar o comando npm install e ele irá instalar todos os plugins sem precisar especificá-los na linha de comando.

5. Configurar o projeto

A última coisa que precisamos fazer é configurar um arquivo chamado gulpfile.js, que é um arquivo JavaScript que irá definir todo processo de execução de tarefas.

Crie um arquivo gulpfile.js. Nele, iremos definir uma variável para cada requisição de plugin.

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

Eu gosto de trabalhar com todos os meus arquivos de origem, como o Sass, em um diretório src/, e todos os meus arquivos de destino em um diretório dist/.

Então, eu vou começar criando uma tarefa Gulp.

gulp.task('workflow', function () {
gulp.src('./src/sass/**/*.scss')
// Insert tasks here
.pipe(gulp.dest('./dist/css/'))
});

O caminho /**/*.scss significa que a tarefa se aplica a este ou a qualquer diretório subseqüente (src/sass/), com qualquer nome de arquivo que termina em .scss. O destino será dist/css/.

Inserir todos os outros plugins é fácil.

gulp.task('workflow', function () {
gulp.src('./src/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(cssnano())
.pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./dist/css/'))
});

Cada plugin terá um arquivo readme GitHub correspondente que explica como usá-lo. No entanto, a maioria deles são bastante simples. Cada tarefa Gulp está em uma função pipe. Acima, você pode ver que estou iniciando sourcemaps, iniciando Sass com log de erro, autoprefixing para os dois últimos navegadores, minificando e escrevendo o sourcemaps para o mesmo diretório como o CSS de saída.

Finalmente, vou definir a tarefa Gulp padrão como uma tarefa de “monitoramento” — o Gulp observará quaisquer alterações no meu diretório especificado e será executado se alguma alteração tiver sido feita.

gulp.task('default', function () {
gulp.watch('./src/sass/**/*.scss', ['workflow']);
});

Arquivo completo:

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('workflow', function () {
gulp.src('./src/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(cssnano())
.pipe(sourcemaps.write('./'))
 .pipe(gulp.dest('./dist/css/'))
});
gulp.task('default', function () {
gulp.watch('./src/sass/**/*.scss', ['workflow']);
});

Agora, para testar este código, vou criar três arquivos .scss simples — principal.scss, _variaveis.scss e _suporte.scss na pasta src/sass

principal.scss

/* Arquivo SCSS Principal */  
// Base
@import "variaveis";
// Componentes 
@import "suporte";

_variaveis.scss

// Tipografia  
$font-style: normal; 
$font-variant: normal;
$font-weight: normal;
$font-color: #222;
$font-size: 1rem;
$line-height: 1.5;
$font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

_suporte.scss

// Define tipografia
html {
font: $font-style $font-variant $font-weight #{$font-size}/#{$line-height} $font-family;
}
// Centraliza verticalmente qualquer coisa
.vertical-center {
display: flex;
align-items: center;
justify-content: center;
}

Pronto! Digite gulp na linha de comando para iniciar o processo, e ele entrará em execução. A partir de agora, você poderá alterar qualquer arquivo da sua pasta sass, e ele irá automaticamente gerar um css minificado na pasta dist, te poupando trabalho.

Explore outros plugins em gulp.js plugin registry.