Trabalhando com Gulp e SASS

É de conhecimento de todos o proprósito e a importância dos arquivos de estilo para o aparência das Web Pages. Porém, alguns problemas podem surgir na escrita do CSS, como por exemplo, o tamanho das declarações de estilo, que, geralmente é consequência do nível de expressividade da linguagem.

Algumas alternativas surgiram para resolver esse e outros problemas de estilização. O SASS é uma opção que resolve em parte o problema do excesso de tamanho dos arquivos CSS, mas além disso, ele otimiza e facilita consideravelmente a escrita de outros recursos do CSS.

Contudo, outras questões relevantes podem ser efetuadas no desenvolvimento Front-end. Por exemplo, facilmente ao criar estilos criamos vários arquivos, que para uma aplicação Web pode gerar problemas de latência. Então ferramentas como o Gulp podem ser atrelados para otimizar a escrita dos estilos concatenando-os e minificando-os.

Portanto, neste artigo será exibido o processo de configuração do Gulp para transformar aquivos SASS, ou SCSS, em arquivos CSS, e por fim como comprimi-los. Tudo isso de forma automatizada.

Falemos agora do Gulp. Ele é um automatizador que ajuda no desenvolvimento nas tarefas dolorosas ou demoradas durante o trabalho de desenvolvimento dos projetos. Ele possui uma variedade imensa de módulos que fazem o que você quiser. E ainda fornece uma superfície API mínima, onde é fácil de aprender e simples de usar.

Configurando o Gulp

Uma vez que sabemos de todas essas informações vamos ver como ele funciona.

Em primeiro lugar você precisa do Gulp instalado localmente. Você deve instalá-lo na sua maquina com o comando:

$ npm install -g gulp

Ao concluir a instalação, crie ou acesse o projeto Web para iniciar a instalação das dependências:

$npm install --save-dev gulp

O save-dev é importante pois colocará o Gulp como uma dependência no seu projeto, num arquivo chamado package.json. Para que depois de feito, caso você queira continuar com o projeto em outra maquina ou disponibilizá-lo para outras pessoas, basta colocar o comando $npm install e ele instalará todas as dependências do seu projeto que estão no package.json.

Uma vez instalado perceba que foi criado uma pasta chamada “node_modules” com diversos itens que o Gulp instalou.

$npm ls

Por que isso acontece? Por que a partir da versão três do npm ele estrutura esta pasta dessa forma. Caso você queira ver apenas o plugin que instalou basta usar o comando:

$npm ls --depth=0

Agora vamos ativar o gulp e para isso você deve criar um arquivo que chamaremos de “gulpfile.js”. Ele é um arquivo javascript que por ele diremos o que o gulp deve fazer.

“Disponibilizarei no final a configuração completa, caso se percam no meio.”

Para criá-lo pelo terminal basta estar na pasta do projeto e escrever:

$touch gulpfile.js

Agora está na hora de escrever as linhas de comando dentro do gulpfile.js. Abra-o com um editor de texto (Sublime, Notepad, Atom, etc).

A primeira linha que faremos servirá para chamar o Gulp pelo terminal:

var gulp = require(‘gulp’);

Agora vamos criar as tasks. Elas são as funções que o Gulp desempenhará no nosso projeto.

A primeira task será a chamada “default”. Para você entender melhor como funciona essa parte do Gulp vamos apenas criar um log imprimindo “Olá Mundo!”:

gulp.task(‘default’, function(){
console.log(‘Olá Mundo’);
});

Voltemos para o terminal e agora digite o comando $gulp:

$gulp

Veja o que aconteceu. O Gulp foi inicializado através do nosso arquivo gulpfile.js e depois foi rodado a task default.

Você deve estar se perguntando: Para que exatamente serve o Gulp? Eu preciso digitar toda vez o comando $gulp no terminal para que haja uma ação no meu código?

A resposta é não. E veremos o porquê a seguir.

Configurando o SASS com Gulp

O SASS é uma linguagem de estilos baseada no CSS. Com ele podemos criar variáveis e reutilizar trechos de códigos com uma sintaxe simples. Porém os navegadores lêem apenas arquivos CSS, então é necessário compilar nosso SASS em CSS. É neste momento que entra o Gulp. Criaremos agora tasks para realizar tais trabalhos e também automatizar essas funções.

Volte para o terminal e instale um plugin do gulp chamado gulp-sass:

$npm install -D gulp-sass

Vamos agora definir o que esse plugin deve fazer. Abra o arquivo gulpfile.js e crie uma outra variável com o mesmo nome do plugin que instalamos:

Crie agora uma nova task. Essa task compilará todos os arquivos da pasta “sass/” do seu projeto para a pasta “css/”. Pois o navegador por si só não vai ler a extensão .sass e sim a extensão .css

No retorno dessa task devemos informar o diretório onde nossos arquivos SASS estão. Colocaremos logo em seguida um pipe para retornar o resultado da ultima função e colocar na nova função de destino que será a nossa pasta onde estão nossos arquivos CSS. E caso você queira comprimiremos nosso output para que tenhamos um arquivo css bem pequeno.

“Ah, lembre-se que podemos trabalhar ou com SASS ou com SCSS. Escolha o que você preferir.”

O código fica assim:

Agora você já pode criar um arquivo .sass dentro do seu diretório “sass/” colocando algum código dentro (tenha em mente que a sintaxe SASS é diferente da CSS) e digitar no terminal o comando $gulp sass:

$gulp sass

Veja agora dentro do diretório “css/”. Ele gerou um arquivo css com a sintaxe diferente daquele que você escreveu no arquivo .sass. Legal não é mesmo?

Neste momento entra mais um plugin do Gulp. O gulp-watch. Com ele você não precisará ficar digitando o comando toda vez que alterar alguma linha de código.

Vamos instalar o plugin pelo terminal:

$npm install gulp-watch -D

Uma vez instalado faremos o mesmo procedimento, sendo que a task terá a função gulp.watch. Como primeiro argumento coloque local dos seus arquivos .sass e um outro argumento dizendo quem ele deve seguir, neste caso, a nossa variável sass declarada anteriormente.

Digitando no terminal o comando gulp watch nossa função começará a rodar de forma automatica.

$gulp watch

Por fim, nós podemos usar a task default para que todas as task sejam rodadas digitando apenas o comando $gulp no terminal.

Para isso deletamos aquela nossa função que tinhamos colocado na task default e criaremos um array. Dentro dele colocaremos os comandos que queremos usar como por exemplo sass, watch, autoprefixer ou outros plugins que você tenha instalado e criado suas respectivas tasks.

O código final do arquivo gulpfile.js ficará assim:

Considerações Finais

Espero que esse tutorial tenha servido para abrir um pouco mais as portas para o uso de novas ferramentas que facilitam o desenvolvimento de sites que melhore a produtividade em seus futuros projetos.

Referências

GRZYBOWSKI, Thiago, Criando um site responsivo do começo ao fim. disponível em: < https://github.com/ThiagoAGDev/criando-um-site-responsivo-do-comeco-ao-fim >

GULP, Site Oficial disponível em: < http://gulpjs.com/ >

SOUZA, Natan. CSS menos sofrido com Sass. Publicado em 04/11/2015. disponível em: < http://blog.caelum.com.br/css-menos-sofrido-com-sass/ >