Compilando SASS com GULP

Este artigo tem como objetivo ajudar todos os desenvolvedores iniciantes que não possuem a capacidade de leitura na lingua inglesa. O Gulp é um kit de ferramentas que ajuda a automatizar tarefas chatas ou demoradas no desenvolvimento de seu projeto. Ele é construído em Node.js, então precisamos instalar o Node.js e caso queiram tenho um post sobre este assunto intitulado “A Melhor Forma de Instalar o Node.js”.

1. Instalando o Gulp

1.1 Podemos instalar o Gulp usando npm. Adicionaremos um sinalizador -g para garantir que o Gulp esteja disponível globalmente para qualquer projeto:

sudo npm install gulp-cli -g

1.2 Para verificar se o Gulp foi instalado, digite:

gulp -v

2. Configure seu Projeto

2.1 Para este exemplo, criaremos uma pasta chamada teste. Para criar esta pasta no Linux, digite:

mkdir teste

2.2 Navegue até a pasta, digite:

cd teste

2.3 Agora execute o comando npm init -y dentro do diretório teste.

O comandonpm init -y cria um arquivo package.json para seu projeto no qual armazena informações sobre o projeto, uma desas informações são as dependencias usadas no projeto.
Se você abrir o arquivo package.json verá algo parecido com a imagem abaixo:

2.4 Uma vez criado o arquivo package.json, podemos instalar o Gulp dentro da pasta do projeto usando o seguinte comando:

npm install gulp --save-dev

Adicionamos --save-dev, com o objetivo de adicionar o gulp como uma dependência de desenvolvimento (dev dependency) no arquivo package.json. Veja como ficou na imagem abaixo:

Depois de instalar o gulp, você deve verificar que foi criada uma pasta nomeada node_modules dentro da pasta de teste e você deve ver também a pasta gulp dentro da pasta node_modules .

3. Estrutura de Pasta do Projeto

Para este artigo, usaremos a seguinte estrutura de pasta.

3.1 Podemos compilar o Sass para CSS através do Gulp com a ajuda de um plugin chamado gulp-sass. Você pode instalar o gulp-sass em seu projeto usando a instalação do npm.

npm install node-sass gulp-sass --save-dev 

Repare que na linha de comando acima instalamos também uma outro plugin chamadonode-sass que é necessário para o funcionamento do gulp-sass .

4. Configurando as Tarefas

4.1 Você precisará criar um arquivo dentro do diretório raiz do seu projeto chamado gulpfile.js e incluir todas as variáveis dos plugins que acabamos de instalar. Neste arquivo, vamos criar a tarefa chamada “sass”.
Adicione o seguinte código no arquivo gulpfile.js:

Na linha 1 a instrução diz ao node.js para procurar na pasta node_modules por um pacote chamado gulp. Quando o pacote é encontrado, atribuímos seu conteúdo à constante gulp. Raciocínio igual pode ser aplicado a linha 2.

Na linha 3 como comentado acima é necessário para o perfeito funcionamento do plug-in gulp-sass.

Na linha 4 atribuimos a função compilaSass à tarefa nomeada como sass.

Na linha 12 a instrução .src(“scr/scss/**/*.scss") diz à tarefa para procurar por todos os arquivos .scss que estão localizados na pasta src/scss bem como em suas sub-pastas, por isto a inclusão do **. Pois é muito comum a divisão em pastas com objetivo de melhor organização utilizando técnicas tal como ITCSS.

Na linha 13 executamos o plug-in gulp-sass para efetuar a compilação dos arquivos .scss em .css.

Na linha 14 a instrução gulp.dest("src/css") diz à tarefa para onde enviar os arquivos já compilados para .css.

4.2 Para fazermos o teste precisamos uma arquivo style.scss na pasta src/scss e adicionar o seguinte conteúdo:

$color: blue;
body {
  background-color : $color;
}

Execute a tarefa sassno diretório raiz do projeto através do comando abaixo:

gulp sass

Agora verifique o arquivo src/css/style.css. O arquivo deve conter o código abaixo:

Se chegou até aqui o seu GULP+SASS está funcionando perfeitamente.

4.3 Temos a opção ainda de mimificar o arquivo CSS compilado, para isto basta alteramos um pouco a função compilaSass() para:

function compilaSass(){
return gulp
.src("src/scss/**/*.scss)
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./css'));
});

5. Verificando mudanças com gulp.watch

Este comando irá automatizar ainda mais o trabalho do dia a dia. A função dele é verficar se houve mudanças nos arquivos e assim que forem feitas mudanças ele irá disparar as tarefas correspondentes. Vamos alterar um pouco o nosso arquivo gulpfile.jsconforme imagem abaixo:

Na linha 8 atribuimos a função watch() à tarefa default que pode ser chamada simplesmente digitando gulp na linha do seu terminal.

Na linha 20 informamos ao gulp que ele deve observar qualquer alteração que aconteça no diretório e execute a função compilaSass() .

Execute então via terminal o comando gulp e verá que no terminal irá aparecer algo parecido com a imagem abaixo:

Altere o arquivo style.scss e verifique se houve alteração do arquivo style.css . Altere pouca coisa, tal como a cor de background do body, por exemplo. Muito útil não acha?

7. Código no GitHub

Caso queira clonar todo o código do que vimos até aqui eu disponibilizei este código no GitHuh, basta você acessar este link, ler as instruções do arquivo README.md e partir para o abraço. Caso queiram contribuir para este pequeno e modesto projeto ficarei agradecido.

6. Finalizando

Espero ter ajudado um pouco na suas tarefas rotineiras. Mas existem muito mais tarefas que podem ser atomaizadas. Tais como:

• gulp.concat: Junta(concatena) todos os nossos arquivos javascript em um único arquivo javascript.
• gulp.babel: Transpila código ES6 para versão ECMA mais antigas com o objetivo dos arquivos javascript ser suportado por navegadores mais antigos.
• gulp-uglify: Mimifica arquivos javascript.
• gulp-htmlmin: Mimifica arquivos html.

Se houverem pedidos irei publicar artigos explicando a instalção destas tarefas de automatização

Só para lembrar:
VOCÊ quer aprender desenvolvimento web em uma comudidade bem legal? Indico as lives da CollabCode pelo Youtube onde o Marco Bruno sempre leva conteúdo de graça para a comunidade de desenvolvedores.