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