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 javascript, baseado no nodejs. Seu funcionamento e propósito é parecido com o do grunt. 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
- Documentação
- Node Streams
- Plugins
- Construindo com Gulp (em inglês)