Mudanças entre as edições de "Comparação grunt e gulp"

Edição atual tal como às 20h18min de 21 de junho de 2016

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

• 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
• NpmCharts