Get started Open in app

Fernanda

Follow 209 Followers About

Gulp direto ao ponto: fluxo de trabalho para

iniciantes
Fernanda May 16, 2017 · 5 min read

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 Cli 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, abra a linha de comando e digite:

node -v

Se estiver tudo correto, esse comando mostrará a versão do Node instalada.

2. Instalar Gulp Cli globalmente

Hora de instalar a linha de comando do 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/site 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
criar este 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 o 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 automaticamente os 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

e precisamos de um guia.

Isso já fará um fluxo de trabalho interessante — 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-autoprefixer gulp-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')
.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 tem um arquivo readme, em seus repositórios GitHub, 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, adicionando prefixos automáticos para as duas últimas versões dos
navegadores, minificando o CSS e escrevendo o sourcemaps no 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 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.

Gulp Iniciante JavaScript Nodejs Technology

About Help Legal

Get the Medium app