Skip to main content

Gulp é um automatizador de tarefas, cujo objetivo final é parecido com o do Grunt. Gulp se aproveita de streams do nodeJS, e se utiliza de código no lugar de configuração, promovendo uma construção de tarefas de uma maneira mais simples e intuitiva.

Gulp é um automatizador de tarefas e sistema de build em , baseado no . Seu funcionamento e propósito é parecido com o do . O Gulp se utiliza do conceito de streams e um modelo onde as tarefas são escritas em forma de código, proporcionando simplicidade e legibilidade, enquanto o Grunt necessita de um alto nível de configuração para definir as mesmas tarefas.

Instalação

O primeiro passo é instalar a CLI do Gulp globalmente no sistema, utilizando-se do gerenciador de pacotes npm:

$ npm install -g gulp

Para verificar a instalação e a versão do Gulp, basta rodar

$ gulp -v

Configuração inicial

O projeto deve ser iniciado com npm init para criar, de maneira interativa, o arquivo package.json. Depois disso, adiciona-se o Gulp

$ npm init
$ npm install --save-dev gulp

As tasks devem estar localizadas no arquivo gulpfile.js, que deve ser criado na raiz do projeto. Um gulpfile contendo uma task default é

var gulp = require('gulp');

gulp.task('default', function(){
    // code
});

E ela pode ser rodada com

$ gulp

Exemplo

Uma tarefa que minifica arquivos .js em uma pasta de desenvolvimento /src/js/ e coloca esses arquivos em uma pasta de distribuição /dist/js pode ser feita usando o pacote gulp uglify. Após a inicialização do projeto e a instalação local dos pacotes

$ npm init
$ npm install --save-dev gulp
$ npm install --save-dev gulp-uglify

a task uglify deve ser criada no arquivo gulpfile.js

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('uglify', function(){
    return gulp.src('src/js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
});

Feito isto, basta rodar

$ gulp uglify

Links interessantes