Tutorial Gulp, saiba como a começar utilizar em seus Projetos

Gulp é um automatizador de tarefas, semelhante ao Grunt, porém mais rápido. Para quem já utiliza o Grunt, geralmente pergunta porque deveria utilizar o Gulp, a reposta é simples, o Gulp é mais rápido e tem uma escrita mais simples.

Para quem não sabe, automatizador de tarefas é uma ferramenta que agiliza o processo de desenvolvimento em ações repetitivas. Exemplo, minificar arquivos Javascript e CSS. Testar se o código Javascript está correto, agrupar diversos arquivos em um, ofuscar código Javascript… São diversas opções, você pode conferir todos os pacotes visitando o link de Plugins.

Chega de explicações e vamos fazer na prática.

Obrigatório ter o node.js instalado, caso não tenha, entre no site node.js, faça download e instale.

Crie uma pasta com um nome desejado, entre nesta pasta e crie o arquivo package.json com o conteúdo abaixo:

{
  "name": "aprendendo",
  "version": "1.0.0",
  "description": "Aprendendo Gulp",
  "author": "Seu nome<seu@email.com.br>",
  "devDependencies": {
 "gulp": "*",
 "gulp-uglify" : "*",
 "gulp-concat" : "*"
  }
}

Após o arquivo criado, adicione seu nome e e-mail na linha “author” de acordo com o formato exemplificado. Depois, instale as dependências via linha de comando ( obrigatório estar na pasta criada ):

npm install

Agora, crie o arquivo gulp.js que será onde ficará as configurações do Gulp e insira o conteúdo:

var js  = [
    './js-source/vendor/jquery/*',         // Todos os arquivos do diretório Jquery
    './js-source/vendor/bootstrap/*.*',     // Todos os arquivos do diretório bootstrap e sub diretórios
    './js-source/main.js'                  // Arquivo único
];

// Núcleo do Gulp
var gulp = require('gulp');

// Transforma o javascript em formato ilegível para humanos
var uglify = require("gulp-uglify");

// Agrupa todos os arquivos em um
var concat = require("gulp-concat");

// Tarefa de minificação do Javascript
gulp.task('minify-js', function () {
    gulp.src(js)                        // Arquivos que serão carregados, veja variável 'js' no início
    .pipe(concat('script.min.js'))      // Arquivo único de saída
    .pipe(uglify())                     // Transforma para formato ilegível
    .pipe(gulp.dest('./js/'));          // pasta de destino do arquivo(s)
});

// Tarefa padrão quando executado o comando GULP
gulp.task('default',['minify-js']);

// Tarefa de monitoração caso algum arquivo seja modificado, deve ser executado e deixado aberto, comando "gulp watch".
gulp.task('watch', function() {
    gulp.watch(js, ['minify-js']);
});

Neste arquivo, estamos supondo que estamos com a seguinte estrutura:

js-source
    vendor
        jquery
            jquery.js
        bootstrap
            bootstrap.main.js
            bootstrap.plugins.js
    main.js
js(pasta vazia)
gulp.js
package.json

Execute o comando abaixo:

gulp

Após executar o comando gulp, será gerado o arquivo script.min.js na pasta js. Desta forma, após alterações nos arquivos o comando deverá ser disparado novamente para gerar a nova versão. Um pouco trabalhoso, mas existe uma maneira de automatizar isto.

Vamos utilizar a TASK “watch” para fazer isto por nós. Digite “gulp watch” e deixe a janela aberta, não cancele pois o processo ficará monitorando os arquivos, caso algum tenha alguma alteração, o arquivo final será gerado novamente.

Este exemplo é válido para compactar, ofuscar e gerar um arquivo único de javascript. No próximo tutorial vamos mostrar como fazer isto com arquivos CSS.