Antes de explicar o porquê da minha preferência ao Gulp e também falar mais sobre ele, acho que primeiro precisamos entender um pouquinho os conceitos.

Automatizadores de tarefas

Automação (do latim Automatus, que significa mover-se por si) é um sistema automático de controle pelo qual os mecanismos verificam seu próprio funcionamento, efetuando medições e introduzindo correções, sem a necessidade da interferência do homem. A automação diminui os custos e aumenta a velocidade da produção. (2004 – Lacombe)

A web tem evoluído muito rapidamente e, com essa evolução, novos padrões e preocupações acabaram surgindo. Otimizar imagens, compilar CSS, minificar arquivos e testar o site em diferentes browsers são algumas dessas preocupações. Mas definitivamente essas tarefas são muito repetitivas e nada divertidas. Por sorte, existem os automatizadores, que se encarregam de fazê-las para nós.

Ah, então é para isso que o Gulp serve? Sim, é para isso mesmo! Mas ele não é o único e nem o primeiro, existem vários, como Make (Unix), Ant (Java), Rake (Ruby) e Grunt (JavaScript). Se quiser uma listinha com vários automatizadores em JS, tem esta aqui – http://ow.ly/HPx0c

Mas… vamos falar de Grunt e Gulp

Gulp (gulpjs.com) e Grunt (gruntjs.com) são os automatizadores mais famosos em JS e compartilham muitas características:

• Ambos são feitos em JS e utilizam o NodeJS para rodar
• Têm uma comunidade muito ativa e, inclusive, compartilham um contribuidor, Sindre Sorhus (com/sindresorhus)
• Funcionam através de uma cli no terminal
• São projetos open source sob a MIT License
• Servem praticamente para os mesmos propósitos

Um pouco do Grunt

Muito conhecido na área de front-end, foi criado em 2012 por Ben Alman (github.com/cowboy). Funciona através da configuração de um arquivo chamado Gruntfile.js, que irá gerenciar os vários plugins do ecossistema e cria arquivos intermediários no disco (temporários), até gerar o arquivo final desejado.

Como instalar?

$ npm install -g grunt-cli

Exemplo

module.exports = function(grunt) {

    grunt.initConfig({
       less: {
          development: {
             files: {
                "build/tmp/app.css": "assets/app.less"
             }
          }
       },

       autoprefixer: {
          options: {
             browsers: ['last 2 version', 'ie 8', 'ie 9']
          },
          multiple_files: {
             expand: true,
             flatten: true,
             src: 'build/tmp/app.css',
             dest: 'build/'
          }
       }
    });

    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-autoprefixer');

    grunt.registerTask('css', ['less', 'autoprefixer']);
};

A partir do exemplo acima, notamos que é criado um módulo, e ele irá encapsular todas as configurações do Grunt, tendo algumas opções dentro de cada etapa de configuração, como arquivos e tarefas que são chamadas.

Veja um workflow usando o Grunt, feito pelo Davidson Fellipe.

Pontos fortes do Grunt

• Comunidade grande
• Muitos plugins

Pontos fracos do Grunt

• Arquivos de configuração muito grandes
• Grande número de parâmetros para cada plugin
• Processamento lento quando utiliza arquivos muitos grandes
• Linha de aprendizado um pouco maior
• Criação de arquivos temporários

Um pouco do Gulp

O Gulp foi criado na metade de 2013 por Eric Schoffstall com o objetivo de simplificar e agilizar o processo, utilizando streams. A informação é transmitida através das tarefas usando o método de pipeline, o que reduz o número de operações I/O.

Como instalar?

$ npm install -g gulp

Exemplo

var gulp = require('gulp'),
    less = require('gulp-less'),
    autoprefix = require('gulp-autoprefixer');

gulp.task('css', function () {
   gulp.src('assets/app.less')
      .pipe(watch())
      .pipe(less())
      .pipe(autoprefix('last 2 version', 'ie 8', 'ie 9'))
      .pipe(gulp.dest('build'));
});

Diferentemente do Grunt, o arquivo do Gulp não irá configurar os plugins – ele irá fazer as chamadas das tarefas de forma prática e simples. Os grandes diferenciais são a utilização dos pipes(), que encadeiam as tarefas, e a API básica do Gulp, que possui task(),run(), watch(), src()e dest().

Veja um exemplo de um worflow usando o Gulp: http://ow.ly/HPymD.

Pontos fortes do Gulp

• Melhor performance
• Arquivo de configuração pequeno e mais fácil de ler
• Linha de aprendizado menor
• Evita criação de arquivos temporários
• Facilidade de uso através dos 5 comandos principais da API
• Plugins mais simples e menores
• Utilização de bibliotecas-padrão em vez de plugins para tudo
• As tarefas são executadas com o máximo de concorrência

Pontos fracos do Gulp

• Menos plugins que o Grunt (precisa mesmo de tantos?)
• Comunidade menor

Comparativo

Informação	Gulp	Grunt
Logo
Criado em	2013	2012
Número de Plugins	1136	3989
Downloads por mês	437.200	853.592
Contribuidores	111	49

Já faz um tempo considerável que o Gulp foi lançado, então o seu “boom” já diminuiu e agora podemos analisá-lo melhor. De acordo com os dados do NPM, o Gulp continua crescendo e já está inclusive com um número maior de contribuidores no core, o que só demonstra que ele é, sim, uma ótima ferramenta para automatização de tarefas e é bastante aceito na comunidade.

Performance

As tarefas foram executadas no meu MacBook Air 2014 (1.4 GHz Intel Core i5 – 8Gb Ram – 256Gb SSD). Para fazer um teste mais pesado, optei por carregar todos os arquivos do Bootstrap (Sass e JS).

Tarefa	Gulp	Grunt
Sass	0.821s	1.870s
UglifyJS	80ms	815ms

Podemos notar que o Gulp leva uma boa vantagem nos tempos de compilação, e isso se deve ao fato de ele utilizar as Streams, não precisando criar arquivos temporários.

Por que Gulp?

Como mostrado acima, o Gulp é mais fácil de utilizar, tem melhor performance e é escrito em cima de código em vez de configuração, como no Grunt. Ele possui plugins para a maioria das tarefas utilizadas normalmente, é mais fácil de escrever plugins para tarefas ainda não existentes e, apesar de ter uma comunidade menor que a do Grunt, é bastante grande. Como eu priorizo facilidade e performance, não pensei duas vezes em utilizá-lo no meu workflow.

Devo partir para o Gulp então?

Essas perguntas sempre aparecem, e a melhor resposta para elas é: “Depende!”. Se você já está confortável com a configuração do seu sistema atual, você realmente tem necessidade de mudar só porque dizem que é melhor?

Você está começando agora a montar seu workflow? Se a resposta for sim, então vale a pena olhar para o Gulp, ele será mais fácil de aprender e você já terá as vantagens dele.

Você está tendo problema de demora na compilação dos arquivos? Teste o Gulp – ele pode ajudar bastante nisso. Eu tinha uma máquina mais modesta antes e como não era SSD, as tarefas de leitura/escrita eram bem mais lentas, e o Grunt fazia piorar ainda mais; então mudei para o Gulp e tive um belo ganho de velocidade.

O mais importante de tudo é passar a utilizar um automatizador, o que irá lhe permitir ter um padrão bem melhor nos seus projetos e ganhar um tempo considerável.

***

Artigo escrito com a colaboração de Willian Justen de Vasconcellos – desenvolvedor front-end que ama trabalhar com desafios e projetos criativos, trabalhando atualmente no Queremos! É entusiasta de tecnologias web e evangelista de SVG. @Willian_justen | github.com/willianjusten | willianjustenqui@gmail.com