Comparação grunt e gulp

De MSTECH wiki
Ir para: navegação, pesquisa

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

Instalação

Será preciso instalar os seguintes elementos por npm:

  • Grunt
    • grunt-cli - para reconhecer os comandos do grunt - global
    • grunt - task runner / automatizador. - local
    • grunt-contrib-uglify - minificador e obsfucaador de javascript. - local
  • Gulp
    • gulp-cli - para reconhecer os comandos do gulp - global
    • gulp - task runner / automatizador . - local
    • gulp-uglify - minificador e obsfucaador de javascript. - local
    • gulp-utils - realiza funções de log e outras. - local

npm install -g gulp-cli grunt-cli &&
npm install gulp gulp-uglify gulp-utils grunt grunt-contrib-uglify


Será utilizado para teste a seguinte estrutura de pastas:

  • dist
  • src
    • index.js
  • Gruntfile.js
  • gulpfile.js
  • package.json


O arquivo index.js servirá somente para validar os watchers utilizado pelos automatizadores.


Exemplos

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']);
  // 18 linhas de código
};

Assim ao executar um grunt na cli irá executar uma minificação e ficara olhando caso algum arquivo seja altera e minificando o mesmo em 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']);
// 16 linhas de código

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


Comparação

Ao executar ambos é possível notar um diferença na velocidade a favor do gulp, entretando a legibilidade do grunt é mais fácil.
O grunt apresenta uma leitura e escrita muito fáceis, permitindo uma criação mais ágil e compreensiva, porém mais lenta na execução. Além de possuir uma comunidade pelo menos 3x superior ao do gulp.
O gulp utiliza elementos como promises e outras funções, provenientes do NodeJS, por tanto, exigindo mais conhecimento de javascript além de permitir uma maior flexibilidade.

A questão mais importante é definir com que frenquência será necessário o uso do automatizador no projeto.
Processos continuos e constantes precisam ser ágeis, logo é recomendado que ser utilize o gulp.
Para processos pontuais ( como build, versionamento código ou pacote ) e que o a diferentes entre segundos e milisegundos é dispensável, é interessante utilizar o grunt.

Em termos de utilização de mercado é perceptivel uma maior adoção do gulp no primeiro semestre de 2016.

Referências

Disponível em "http://wiki.mstech.com.br/index.php?title=Comparação_grunt_e_gulp&oldid=738"