A engine de qualquer projeto que usa Gulp é o arquivo gulpfile.js .

Este arquivo JavaScript é comumente referenciado como um  gulpfile . Os termos “gulpfile.js” e “gulpfile” são sinônimos no contexto deste tutorial.

Um gulpfile nos permite criar tarefas e automatizá-las em nosso projeto. O conteúdo do gulpfile.js varia de projeto para projeto.

Vamos criar um gulpfile para nosso projeto.

touch gulpfile.js

Instalando plugins Gulp

Embora tenhamos instalado o Gulp em nosso sistema, também precisamos instalá-lo em nosso diretório de projeto. Execute o seguinte comando:

npm install gulp –save-dev

Observação: talvez seja necessário digitar sudonovamente no início do comando para obter acesso ao sistema se estiver com problemas para executar o comando.

Em seguida, vamos instalar alguns plugins Gulp que nos permitirão compilar nossos arquivos Sass em CSS e depois combiná-los em um arquivo CSS.

Na linha de comando, digite o seguinte:

npm install gulp-sass gulp-concat –save-dev

diretório node_modules

Você notará que um diretório node_modules foi criado dentro do diretório do seu projeto após emitir o npm installcomando. Este diretório contém todos os arquivos necessários para executar os plugins.

À medida que instalamos plugins Gulp e pacotes Node, eles serão colocados em node_modules .

Configurando uma tarefa Gulp

Dentro do gulpfile.js , agora podemos configurar uma tarefa Gulp.

Abra gulpfile.js em seu editor de código favorito e vamos codificar.

Especificando as dependências do projeto

A função do Node require()nos permite especificar os plugins necessários para executar nossas tarefas Gulp.

Elas são chamadas de dependências . Dependemos deles para que nossas tarefas do Gulp funcionem.

Além disso, para que não estejamos chamando a require()função toda vez que queremos referenciar um de nossos plugins, colocamos o que a require()função retorna em objetos JavaScript.

var gulp = require(‘gulp’),

 sass = require(‘gulp-sass’),

 concat = require(‘gulp-concat’);

Então agora, quando usamos a sass()função em nosso código, estamos falando sobre o plugin gulp-sass. Quando usamos concat(), estamos referenciando o plugin gulp-concat.

Usando as dependências do projeto

Uma vez que dissemos ao Gulp quais são nossas dependências, podemos configurar uma tarefa.

Vamos criar uma tarefa Gulp chamada styles.

gulp.task(‘styles’, function() {

 return gulp.src(‘styles/*.scss’)

 .pipe(sass({

 ‘sourcemap=none’: true

 }))

 .pipe(concat(‘style.css’))

 .pipe(gulp.dest(‘styles/’))

});

Uau.

O que?

No bloco de código acima, criamos uma tarefa chamada styles. Esta é a nossa referência à nossa tarefa. Podemos usar esse nome em outras tarefas do Gulp ou chamá-lo a partir da linha de comando.

Dentro do task wrapper, escrevemos o que é essencialmente nosso script para nossa tarefa.

O formato geral do wrapper de tarefa Gulp é:

gulp.task(‘name-of-the-task’, function() {

 // The guts go here

});

A returninstrução diz que a stylestarefa retornará um valor quando for executada. O valor neste caso é nosso código processado.

Usamos um método Gulp chamado .src()para obter e especificar os arquivos de entrada nos quais queremos executar a stylestarefa, que são os arquivos .scss. Ao colocar um asterisco (*) no lugar de um nome de arquivo específico, estamos basicamente dizendo: Vá encontrar qualquer arquivo que tenha a extensão .scss dentro do diretório de estilos .

gulp.task(‘styles’, function() {

 return gulp.src(‘styles/*.scss’)

});

Agora, a parte bonita de Gulp. Encadeando os processos que queremos executar com o pipe()método do Node.

O pipe()método nos permite passar código de um processo para outro. Quando um plugin processa nossos arquivos .scss, a saída é passada para o próximo plugin.

gulp.task(‘styles’, function() {

 return gulp.src(‘styles/*.scss’)

 .pipe(sass({

 ‘sourcemap=none’: true

 }))

 .pipe(concat(‘style.css’))

 .pipe(gulp.dest(‘styles/’));

});

Isto é o que nossa styles tarefa faz:

1. Obtenha e especifique os arquivos que queremos processar. Para isso, usamos o .src()método para obter e apontar para os arquivos .scss dentro do diretório de estilos .

• Compile arquivos Sass para CSS. Lembre-se de que instanciamos a sass()função anteriormente, que se refere ao plugin gulp-sass.

• Combine todas as regras de estilo CSS em uma folha de estilo.  O plugin gulp-concat cria uma folha de estilo chamada style.css  contendo todo o nosso CSS.

• Escreva a folha de estilo no diretório de estilos.  O arquivo style.css será colocado no diretório de estilos . Isso é feito com o .dest()método.