Comparação grunt e gulp

Este comparativo serve para apresentar o potêncial de duas ferramente que são amplamente usadas no mercado.

Automatizadores

Os automatizadores são responsáveis por possibilitar um aumento na velocidade de produção além de proporcionarem ferramentas que permitem elevar a qualidade dos produto e a segurança do processos.

Sendo possível realizar um ou várias tarefa que serão executadas várias vezes durante o processo de desenvolvimento, diminuindo a chance de erro.

Alguns dos processos possíveis são: validação código, testes, minificação, compressão, concatenação, obsfurcação, criação entre outros.
Também é possível aplicar compatibilidade e testar em diversos browser.

Assim é possível falar que podemos fazer virtualmente tudo com um automatizador bem configurado.

Um cenário bem comum em front-end é utilizar automatizadores para fazer a validação e otimização de código e estilos em tempo real.

Outro cenário é fazer a geração de arquivos minificados, concatenados e comprimidos em formato de bundle, para a distribuição quando é terminado o desenvolvimento.
Em um cenário mais complexo seria os processos executados em tempo real e momentaneos.Em tempo real seria executado:

• Validação
• Testes unitários
• Atualização de navegador (live reload)

Em momentos específicos seriam aplicados:

• Validação no sistema inteiro.
• Teste no sistema inteiro( unitário, integração e outros )
• Concatenação
• Compressão
• Minificação/Obsfurcação
• Distribuição
• Versionamento produto (x.x.x)
• Versionamento código ( git )
• Compilação

Configuração

Ambos apresenta uma estrutura de configuração orientada a JSON( JavaScript Ojbect Notation ), ou seja, é possível criar um objeto que possuí todas as configurações que cada tarefa irá utilizar, bem como é possível especificar mais de uma configuração para cada tarefa(normalmente).
Exemplo de configuração(Gruntfile.js) com grunt.

//é pressuposto que foram baixadas as depedências: npm install grunt grunt-contrib-uglify --save-dev

//expoem(exporta) o modulo no NodeJS.
module.exports = function(grunt) {

  grunt.initConfig({
    watch: {
      js:{
        files: ['src/*.js'],
        tasks: ['uglify']
      }
    },

    uglify: {
      'dist/main.js': 'src/*'  
    }    
  }); 

  // instanciando módulos
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');

  //Gera um log com base em evento 'Watch'.
  grunt.event.on('watch', function(action, filepath) {
    grunt.config('watch:uglify>', filepath);
  });

  grunt.registerTask('default', ['uglify','watch:js']);
  
};

Assim ao executar um grunt na cli irá executar uma minificação e ficara olhando caso algum arquivo seja altera e minificando o mesmo sem seguida.

Exemplo de configuração(gulpfile.js) com gulp.

//é pressuposto que foram baixadas as depedências: npm install gulp gulp --save-dev

// instanciando módulos
var gulp = require('gulp'),
gutil = require('gulp-util'),
uglify = require('gulp-uglify');

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

//Watch com log
gulp.task( 'watchLog', function() {
  // corpo da tarefa watch
  gulp.watch('src/**/*.js', ['uglify'])
    // evento no watch com log
    .on('change', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    }); 
});

gulp.task('default', ['uglify','watchLog']);

Assim ao executar um gulp na cli irá executar uma minificação e ficara olhando caso algum arquivo seja altera e minificando o mesmo sem seguida.

Referências

• Discussão no Reddit.
• Post comentando sobre Grunt e Gulp, de Sindre Sordus (Autor do AVA)
• Grunt vs Gulp.js: A Comparison
• Automação de build de front-end com Grunt.js
• Bye bye Grunt.js, hello Gulp.js!
• Comparing Gulp And Grunt For WordPress Developers
• Grunt
• Creating tasks
• grunt-contrib-watch v1.0.0
• Gulp
• Gulp API docs
• gulp.watch