Você está na página 1de 23

DevHeroes ☰

Gulp para iniciantes – como compilar e


minificar Sass
Por Marcelo Dapper · Postado no dia 04 de janeiro de 2017

Neste artigo vamos ver como instalar e usar o Gulp para automatizar algumas
tarefas básicas como compilar e minificar o Sass.

Estrutura básica de pastas e arquivos

Uma das vantagens em usarmos Gulp e Sass é para podermos organizar


melhor nosso projeto. Vamos começar criando uma estrutura básica inicial de
pastas conforme segue:
DevHeroes ☰
|- gulp intro/
|- css/
|- src/
|- scss/
style.scss
index.html

A pasta principal do projeto vai ser gulp-intro . Dentro da pasta /src/scss


é onde vamos trabalhar em nosso Sass. Depois a versão compilada e
minificada do Sass vai ser exportada para a pasta /css .

Fiquem à vontade em adaptar essa estrutura para uma que vocês já utilizam,
só irão precisar mais para frente apontar algumas variáveis para as pastas que
forem usar.

Instalação do Gulp

Antes de instalar o Gulp você vai precisar ter em seu computador o Node.js
instalado.

Se você estiver no Windows faça o download dele e instale. Caso use macOS
ou Linux recomendo instalar o Node usando o NVM, ele permite que você
instale diferentes versões do Node e troque facilmente entre elas, o que é
muito útil caso você trabalhe em projetos que usam diferentes versões dele.

Para quem usa Linux, saiu um artigo recente no Tableless de como fazer a
instalação do Node usando o NVM.

Assim que tiver o Node instalado podemos instalar o Gulp usando o


comando que segue do NPM:
DevHeroes ☰
Bash

$ npm install global gulp cli

Esse comando vai instalar globalmente --global o gulp-cli para


utilizarmos ele em qualquer projeto.

Se você ainda não tem em seu projeto um arquivo chamado package.json


vamos criar ele agora. Nele ficam armazenados algumas informações sobre o
seu projeto, entre elas quais são as dependências dele.

Podemos criar este arquivo usando o comando abaixo:

Bash

$ npm init

Vão aparecer algumas perguntas para você responder que são usadas para
poder criar o arquivo package.json . Não é preciso preencher todos os
dados que vão ser solicitados, você pode fazer isso mais tarde se for preciso.

Na imagem que segue destacado em vermelho estão minhas respostas:


DevHeroes ☰

O que aparece dentro de parênteses são sugestões do próprio NPM como


respostas, basta dar Enter para confirmar, ou então digitar outra resposta se
preferir.

O arquivo package.json criado terá o seguinte conteúdo:

JSON

1 {
2 "name": "gulp intro",
3 "version": "1.0.0",
4 "description": "Gulp Intro",
5 "main": "index.js",
6 "scripts": {
7 "test": "echo \"Error: no test specified\" exit 1"
8
DevHeroes
}, },

9 "author": "Marcelo Dapper",
10 "license": "ISC"
11 }
12

Uma vez que temos em nosso projeto o arquivo package.json podemos


instalar a dependência local do Gulp usando o comando abaixo:

Bash

$ npm install save dev gulp

Após fazermos isso essa dependência será baixada para a pasta


node_modules , se procurar dentro dela vai encontrar uma pasta chamada
gulp :

Vai perceber também que foram instaladas muitas outras coisas junto do
Gulp, isso é normal, não se assuste. As outras pastas são dependências que o
próprio Gulp vai precisar.

Se abrir o arquivo package.json vai ver o Gulp listado como


devDependencies , conforme segue na linha 12:
DevHeroes ☰
JSON

1 {
2 "name": "gulp intro",
3 "version": "1.0.0",
4 "description": "Gulp Intro",
5 "main": "app.js",
6 "scripts": {
7 "test": "echo \"Error: no test specified\" exit 1"
8 },
9 "author": "Marcelo Dapper",
10 "license": "ISC",
11 "devDependencies": {
12 "gulp": "^3.9.1"
13 }
14 }
15

Se você está usando o Git para controle de versão do seu projeto, lembre-se
de criar um arquivo .gitignore na raiz do seu projeto e incluir nele
node_modules para que ele ignore está pasta, você não vai querer ter ela em
seu repositório.

Para este artigo criei meu arquivo .gitignore com o seguinte conteúdo:

# Node.js #
node_modules

Criar o arquivo de configuração ‘gulpfile.js’


Todas as configurações do Gulp são guardadas dentro de um arquivo
DevHeroes
chamado gulpfile.js . Por isso vamos criar agora este arquivo na raiz de ☰
nosso projeto.

Após isso teremos a seguinte estrutura de arquivos e pastas em nosso


projeto:

|- gulp intro/
|- css/
|- node_modules/
|- src/
|- scss/
style.scss
.gitignore
gulpfile.js
index.html
package.json

Como criar nossa primeira tarefa

Agora vamos começar a configuração de nossa primeira tarefa dentro do


arquivo gulpfile.js . O primeiro passo é dar require no Gulp conforme
segue:

JavaScript

1 var gulp = require('gulp');

A declaração require diz para o Node procurar dentro da pasta


node_modules por um pacote chamado gulp e atribuir o conteúdo dele
para a variável gulp .
Depois disso podemos iniciar inserindo nossa primeira tarefa conforme segue
DevHeroes
nas linhas 3-6: ☰

JavaScript

1 var gulp = require('gulp');


2
3 Default task - Run with command 'gulp'
4 gulp.task('default', function() {
5 console.log('Gulp funcionando ');
6 });
7

Com o trecho acima estamos criando a tarefa padrão do Gulp, para rodarmos
ela basta no nosso command line darmos o seguinte comando:

Bash

$ gulp

Teremos o seguinte resultado:

Temos, destacado pelo retângulo vermelho, o log que definimos em nossa


tarefa default . É claro que essa tarefa não serve para nada, mas confirma
que o Gulp está funcionando. Mais para frente vamos substituir essa tarefa
por outra.

Usando Gulp para compilar Sass


O Gulp sozinho não realiza muita coisa, precisamos instalar plugins para as
DevHeroes
funcionalidades que desejamos. Para Sass vamos instalar o seguinte plugin ☰
gulp-sass usando o comando que segue:

Bash

$ npm install save dev gulp sass

Em nosso arquivo gulpfile.js precisamos fazer o require deste pacote e


a atribuição para a variável conforme segue na linha 2:

JavaScript

1 var gulp = require('gulp');


2 var sass = require('gulp sass');
3

Em seguida, vamos criar variáveis para apontar onde está nosso arquivo do
Sass, a pasta de destino do arquivo CSS final após ser compilado e as opções
de compilação:

JavaScript

1
2 * Variables
3
4 Sass Source
5 var scssFiles = './src/scss/style.scss';
6
7 CSS destination
8 var cssDest = './css';
9
10 Options for development
11
DevHeroes
var sassDevOptions = { ☰
12 outputStyle: 'expanded'
13 }
14
15 Options for production
16 var sassProdOptions = {
17 outputStyle: 'compressed'
18 }
19

Compilar Sass para desenvolvimento

Vamos criar uma nova tarefa que vai compilar o Sass em um formato para
desenvolvimento, não vai ser minificado para podermos verificar em busca de
erros.

Vamos dar o nome dessa tarefa de sassdev conforme segue:

JavaScript

1 Task 'sassdev' - Run with command 'gulp sassdev'


2 gulp.task('sassdev', function() {
3 Código de nossa tarefa vai aqui
4 });
5

Abaixo temos o conteúdo de nossa tarefa básica para compilarmos o Sass


para desenvolvimento:
DevHeroes ☰
JavaScript

1 Task 'sassdev' - Run with command 'gulp sassdev'


2 gulp.task('sassdev', function() {
3 return gulp.src(scssFiles)
4 .pipe(sass(sassDevOptions))
5 .pipe(gulp.dest(cssDest));
6 });
7

A primeira coisa que fizemos foi informar onde estão os arquivos por meio do
gulp.src(scssFiles) na linha 5, veja que nele passamos como parâmetro a
variável scssFiles que criamos antes e contém o caminho para os arquivos.

No Gulp usamos o .pipe() para encadearmos uma série de atividades em


nossa tarefa, por isso em seguida usamos .pipe(sass(sassDevOptions))
para chamarmos a tarefa sass() e passamos como parâmetro para ela a
variável sassDevOptions com as opções de compilação que definimos
anteriormente.

Por último encadeamos mais um comando usando


.pipe(gulp.dest(cssDest)) para chamarmos o comando gulp.dest() e
passamos como parâmetro a variável cssDest com o caminho para o
arquivo final CSS compilado.

Podemos fazer mais um ajuste antes de continuarmos, do jeito que está agora
se houver algum erro em nosso Sass a tarefa não é concluída e não nos
informa o que houve. Para termos uma mensagem de erro vamos adicionar
após sass(sassDevOptions) o comando .on('error', sass.logError) ,
ficando:

JavaScript

.pipe(sass(sassDevOptions).on('error', sass.logError))
DevHeroes ☰
Nossa tarefa final vai ficar:

JavaScript

1 Task 'sassdev' - Run with command 'gulp sassdev'


2 gulp.task('sassdev', function() {
3 return gulp.src(scssFiles)
4 .pipe(sass(sassDevOptions).on('error', sass.logError))
5 .pipe(gulp.dest(cssDest));
6 });
7

Compilar Sass para produção

Agora vamos criar uma tarefa que vai compilar o Sass em um formato para
produção, ele vai ser minificado. Vamos dar o nome dessa tarefa de
sassprod conforme segue:

JavaScript

1 Task 'sassprod' - Run with command 'gulp sassprod'


2 gulp.task('sassprod', function() {
3 return gulp.src(scssFiles)
4 .pipe(sass(sassProdOptions).on('error', sass.logError))
5 .pipe(gulp.dest(cssMinDest));
6 });
7

Podemos ver acima que a tarefa é a mesma que a de desenvolvimento.


Modificamos o nome da tarefa na linha 3 para sassprod . Na linha 5
mudamos a variável com as opções do Sass para sassProdOptions . E por
último na linha 6 mudamos a variável que contém o arquivo de destino para
DevHeroes
cssMinDest . ☰

Mas existe um problema, essa tarefa vai criar um arquivo com o mesmo nome
do arquivo gerado pela sassdev . Para contornarmos isso vamos instalar um
plugin do Gulp chamado gulp-rename através do comando que segue:

Bash

$ npm install save dev gulp rename

Depois precisamos adicionar ele como require em nosso arquivo


gulpfile.js conforme segue na linha 3:

JavaScript

1 var gulp = require('gulp');


2 var sass = require('gulp sass');
3 var rename = require('gulp rename');
4

Em nossa tarefa sassprod vamos encadear mais um evento para antes de


salvar o arquivo final renomear ele conforme vemos na linha 5:

JavaScript

1 Task 'sassprod' - Run with command 'gulp sassprod'


2 gulp.task('sassprod', function() {
3 return gulp.src(scssFiles)
4 .pipe(sass(sassProdOptions).on('error', sass.logError))
5 .pipe(rename('style.min.css'))
6 .pipe(gulp.dest(cssDest));
7 });
8
DevHeroes ☰

Dessa maneira nosso arquivo para a produção passa a ter um nome diferente
do arquivo gerado para desenvolvimento. É muito comum a versão minificada
receber no nome do arquivo o complemento .min conforme usamos aqui.

Criar a tarefa ‘watch’

Da forma que temos agora, precisamos toda vez que houver uma mudança
em nosso Sass rodar o comando do Gulp para compilar.

Normalmente estamos acostumados em fazer mudanças em nosso CSS e


testar imediatamente elas no navegador. Se queremos ter algo próximo disso
no Sass podemos usar o watch . O que ele faz é observar nossos arquivos
Sass, assim que ele nota uma alteração é disparado a tarefa de compilação
que desejamos.

Para isso vamos criar uma nova tarefa chamada watch conforme segue:

JavaScript

1 Task 'watch' - Run with command 'gulp watch'


2 gulp.task('watch', function() {
3 gulp.watch(scssFiles, ['sassdev', 'sassprod']);
4 });

Nela usamos um recurso do próprio Gulp chamado gulp.watch .

Precisamos passar dois parâmetros:

No primeiro informamos os arquivos que queremos que o Gulp observe


por mudanças, no caso usamos a variável que aponta isso scssFiles .
No segundo parâmetro passamos um array com as tarefas que
queremos disparar caso os arquivos sejam modificados, no nosso caso ☰
DevHeroes
vamos rodar as duas tarefas de Sass sassdev e sassprod .

Caso queira ganhar tempo, especialmente se seu projeto estiver demorando


muito para compilar, pode optar por disparar apenas uma das tarefas.

Criar a tarefa ‘default’

Agora que definimos todas as tarefas de nosso projeto podemos ajustar


nossa tarefa default, ela roda ao darmos apenas o comando gulp .

No começo desse artigo criamos a tarefa default para vermos se o Gulp


estava funcionando, podemos apagar ela e substituir pela que segue:

JavaScript

1 Default task - Run with command 'gulp'


2 gulp.task('default', ['sassdev', 'sassprod', 'watch']);
3

Agora ao darmos o comando gulp primeiro vai rodar a tarefa sassdev , em


seguida a tarefa sassprod e por último vai rodar a watch , que vai passar a
monitorar os arquivos Sass em nosso projeto, sempre que houver uma
mudança vai compilar novamente eles.

Arquivo ‘gulpfile.js’ final

Nosso arquivo final do Gulp vai ficar como segue:

JavaScript

1 var gulp = require('gulp');


2 var sass = require('gulp sass');
var rename = require('gulp rename');
3
4
DevHeroes ☰
5 * Variables
6
7 Sass Source
8 var scssFiles = './src/scss/style.scss';
9
10 CSS destination
11 var cssDest = './css';
12
13 Options for development
14 var sassDevOptions = {
15 outputStyle: 'expanded'
16 }
17
18 Options for production
19 var sassProdOptions = {
20 outputStyle: 'compressed'
21 }
22
23
24 * Tasks
25
26 Task 'sassdev' - Run with command 'gulp sassdev'
27 gulp.task('sassdev', function() {
28 return gulp.src(scssFiles)
29 .pipe(sass(sassDevOptions).on('error', sass.logError))
30 .pipe(gulp.dest(cssDest));
31 });
32
33 Task 'sassprod' - Run with command 'gulp sassprod'
34 gulp.task('sassprod', function() {
35 return gulp.src(scssFiles)
36 .pipe(sass(sassProdOptions).on('error', sass.logError))
37 .pipe(rename('style.min.css'))
38
DevHeroes
.pipe(gulp.dest(cssDest)); ☰
39 });
40
41 Task 'watch' - Run with command 'gulp watch'
42 gulp.task('watch', function() {
43 gulp.watch(scssFiles, ['sassdev', 'sassprod']);
44 });
45
46 Default task - Run with command 'gulp'
47 gulp.task('default', ['sassdev', 'sassprod', 'watch']);
48
49

Testes

Vamos agora escrever um código em Sass e ver se está funcionando


corretamente. Abra o arquivo src/scss/style.scss e vamos escrever nele
o código que segue:

Sass (Scss)

1 .card {
2 background color: red;
3
4 & title {
5 color: white;
6 }
7 }
8

Em nosso command line vamos rodar o comando abaixo:


DevHeroes ☰
Bash

$ gulp

Vamos na pasta /css e verificar se os arquivos style.css e


style.min.css foram criados. No arquivo não minificado devemos ter o
seguinte código CSS compilado:

CSS

1 .card {
2 background color: red;
3 }
4
5 .card title {
6 color: white;
7 }
8

Ao dar o comando gulp além de ter compilado ele passou a observar nosso
arquivo src/scss/style.scss , se fizermos qualquer mudança nele e
salvarmos, as tarefas sassdev e sassprod são disparadas novamente.

Podemos testar isso agora, vamos adicionar o código abaixo das linhas 8-11 e
salvar nosso arquivo:

Sass (Scss)

1 .card {
2 background color: red;
3
4 & title {
5 color: white;
6
DevHeroes
} ☰
7
8 & img {
9 border: 1px solid #eee;
10 border radius: 5px;
11 }
12 }
13

No command line podemos ver que as tarefas foram executadas novamente e


nossos arquivos style.css e style.min.css foram atualizados com a
adição das linhas 9-12 conforme segue:

CSS

1 .card {
2 background color: red;
3 }
4
5 .card title {
6 color: white;
7 }
8
9 .card img {
10 border: 1px solid #eee;
11 border radius: 5px;
12 }
13

Caso queira finalizar a tarefa watch basta dar o comando Ctrl + C que ela
será interrompida.
Conclusão
DevHeroes ☰
Neste post vimos como instalar a usar o Gulp para automatizar tarefas como
a compilação do Sass. Como podem ter notado fizemos uma estrutura bem
básica, para entendermos o funcionamento do Gulp neste primeiro momento.

Em um próximo artigo vamos ver como usar o autoprefixer para adicionar


os prefixos dos navegadores onde necessário em nosso CSS.

Também trabalharmos com um único arquivo Sass como fizemos aqui não é o
recomendável. Futuramente vamos ver como organizar o Sass para termos
um projeto mais escalável e de fácil manutenção usando as metodologias
BEM e ITCSS junto com o Sass.

Postado em Tools

Marcelo Dapper
Software Engineer,
atualmente focado em
construir aplicações com
JavaScript. Eu amo aprender
novas tecnologias e
compartilhar com outros
minhas descobertas.

https://twitter.com/mdapper
DevHeroes
ALSO ON DEVHEROES

console.log( ‘Hello Tecnologias e


World from … Como usar a tag script ferramentas usadas …
5 years ago 4 years ago • 2 comments 4 years ago a ye

Sejam bem vindos ao Neste post vamos ver como Algumas tecnologias e Ma
DevHeroes! Acompanhe usar a tag script, inline ou ferramentas usadas para Eng
nossa jornada em nos … arquivo externo, onde … desenvolver o … foca

16 Comments DevHeroes 🔒 Disqus' Privacy Policy  Renato Marques …

 Recommend 3 t Tweet f Share Sort by Best

⚠ DevHeroes requires you to verify your email address before posting. Send verification email ×
to guma_cojogra@yahoo.com.br

Join the discussion…

Walter Jaworski • 3 years ago


Excelente tutorial, bem explicado e fácil de entender. Só gostaria de saber a mesma
coisa que o Dayan: se em todo projeto novo terá que ser feito isso, ou existe uma forma
de gravar um package.json com configurações personalizadas pra que possa utilizar o
poder do gulp em qualquer projeto
1△ ▽ • Reply • Share ›

Sergio > Walter Jaworski • 3 years ago


Se a estrutura do novo projecto for igual e as dependências que for usar também
forem as mesmas, então basta copiar o gulpfile e instalar localmente as
dependências. Normalmente o que faço é no package.json do projecto anterior,
copio as dependências que usei, depois colo no package.json do novo projecto e
na linha de comando basta escrever "npm i" que instala todas as dependências
necessárias. Espero ter ajudado.
△ ▽ • Reply • Share ›

Jovany Alves • a year ago


Tem como atualizar esse artigo, para hoje abril 2020.
Grato, excelente didática e muito minucioso aos detalhes e lógica excepcional.

Quando crescer quero ser como você amigo.

Parabéns!
△ ▽ • Reply • Share ›
Sarah • 2 years ago
DevHeroes
Excelente tutorial. Obrigada! ☰
△ ▽ • Reply • Share ›

Ale Marchese • 3 years ago


obrigado muito bom!
△ ▽ • Reply • Share ›

Gêdhean Alves • 3 years ago


Muito bom.
△ ▽ • Reply • Share ›

Thiago Diniz • 3 years ago


Valeu cara, me ajudou muito e bem explicado!
△ ▽ • Reply • Share ›

Marcio Araujo • 3 years ago


Muito bom! Me ajudou!
△ ▽ • Reply • Share ›

Cássio Lacerda • 3 years ago


Ótimo tutorial, de verdade!
△ ▽ • Reply • Share ›

Dayan • 3 years ago


Para todo o projeto novo eu tenho que fazer isso sempre?

Achei bem complicado


△ ▽ • Reply • Share ›

Felipe Ciconini Valcanaia • 3 years ago


Olá Marcelo!

Estou fazendo um projeto onde preciso 'temificar' o código Sass, ou seja, criar alguns
arquivos css de cada tema. Existe algum plugin do npm que faça isso? Pesquisei e
encontrei as chamadas Streams, mas não entendi muito bem como funciona.

Obrigado!
△ ▽ • Reply • Share ›

Rodrigo Alves • 3 years ago


Marcelo,

na hora de rodar o gulp ele fica assim:

[22:49:38] Starting 'sassdev'...


[22:49:38] Starting 'sassprod'...
[22:49:38] Starting 'watch'...
[22:49:38] Finished 'watch' after 7.24 ms
[22 49 38] Fi i h d ' d' ft 54
[22:49:38] Finished 'sassprod' after 54 ms

DevHeroes
[22:49:38] Finished 'sassdev' after 64 ms
[22:49:38] Starting 'default'...

[22:49:38] Finished 'default' after 34 μs

e trava. Funciona todas as tarefas se eu digitar gulp <tarefa> menos o watch


△ ▽ • Reply • Share ›

Camilla Trés • 4 years ago


Marcelo, parabéns pelo tutorial!
Muito claro e bem explicativo para os iniciantes. Parabéns!
△ ▽ • Reply • Share ›

Marcelo Dapper > Camilla Trés • 4 years ago


Obrigado Camilla, preciso até retomar e continuar a escrever alguns artigos sobre
Gulp. Estou na verdade usando webpack agora, por isso que acabei não falando
mais do Gulp aqui
△ ▽ • Reply • Share ›

Leandro Freitas • 4 years ago


Gostaria de parabenizar pelo site... Conteúdo de muita qualidade!!!
△ ▽ • Reply • Share ›

Marcelo Dapper > Leandro Freitas • 4 years ago


Obrigado @Leandro Freitas, é sempre muito bom ter feedback!
△ ▽ • Reply • Share ›

Copyright © 2021 · DevHeroes | desenvolvido por  Marcelo Dapper