Webpack vs Gulp vs Grunt

Por Stephen Afam-Osemene

Introdução

Com a crescente complexidade dos projectos Javascript e a necessidade de automatizar tarefas, acompanhar o desempenho das aplicações e executar algumas actividades de manutenção, tornou-se muito importante decidir que tipo de ferramenta de construção adoptar. Isto não era muito necessário porque o Javascript não precisava particularmente ser compilado; no entanto, com projetos como aplicações de página única, e o advento das ferramentas de construção, as tarefas que reaparecem agora são automatizadas. Vendo que se tornou mais do que uma necessidade utilizar ferramentas de construção, os desenvolvedores de software neste momento enfrentam o desafio de escolher uma que seja perfeita para o seu projeto.

Neste artigo, vamos comparar Grunt, Gulp e Webpack em relação às seguintes características:

• Facilidade de uso
• Popularidade
• Reliabilidade
• Extensibilidade

Grunt e Gulp são executores de tarefas, enquanto Webpack é um bundler de módulos. Os task runners são basicamente usados para automatizar tarefas em um processo de desenvolvimento. Algumas dessas tarefas incluem comprimir arquivos JS, compilar arquivos Sass, cuidar de alterações nos arquivos, minificar arquivos e prefixar automaticamente. Os agregadores de módulos pegam vários módulos da aplicação que cada um tem dependências e os agregam em ativos estáticos. Os empacotadores de módulos executam a tarefa de task runners, e levam vários passos além. Esperemos que no final do artigo, fique mais claro qual ferramenta de construção usar para seu projeto.

Facilidade de uso

Quanto mais complexa for uma ferramenta, mais difícil será a sua utilização. Sendo executores de tarefas, Gulp e Grunt oferecem recursos como minificação de código, pré-processamento de CSS, teste de unidade e uma lista de outros.

Comparado para Grunt ou Webpack, Gulp é muito mais fácil de usar. É possível iniciar um projeto usando o Gulp em poucos minutos. Grunt, no entanto, tem menos problemas de configuração do que o Webpack.

Para configurar o Gulp, os seguintes passos são dados

• Verifica se o nó, npm e npx estão instalados
• Instala o Gulp CLI usando npm install --global gulp-cli
• Cria um pacote.json file for devDependencies
• Install gulp package into the devDependencies using npm install --save-dev gulp@next
• Criar um arquivo gulp.js onde as tarefas serão escritasfunction defaultTask(cb) { // place code for your default task here cb();}exports.default = defaultTask

Para usar o Grunt, você tem que fazer o seguinte:

• Atualizar seu npm usando npm update -g npm
• Instalar o Grunt CLI usando npm install -g grunt-cli
• Configurar seu pacote.json file onde suas dependências de desenvolvimento estão listadas
• Crie um arquivo Gruntfile.js onde as tarefas são escritas. As tarefas são sempre escritas dentro deste bloco:module.exports = function(grunt) { // Grunt tasks go here};

Os processos para configurar o Gulp e o Grunt são similares. Entretanto, o Gulp é mais expressivo; ele permite que você escreva um código que claramente declare sua função. Gulp é baseado em Node streams, permitindo o pipelining. O Grunt, por outro lado, depende de arquivos de configuração de dados onde cada arquivo de origem e destino deve ser declarado. À medida que o projeto fica maior, o Grunt se torna ainda mais complicado de gerenciar.

Se, por exemplo, você precisar compilar o Sass, minify o arquivo CSS resultante e Uglify seu arquivo JS usando Grunt, o arquivo Gruntfile.js será parecido com isto

module.exports = function (grunt) { grunt.initConfig({ sass: { dist: { files: { 'dist-grunt/css/style.css': 'assets/scss/style.scss' } } }, cssmin: { dist: { files: { 'dist-grunt/css/styles.min.css': } } }, uglify: { dist: { files: { 'dist-grunt/js/scripts.min.js': } } }, grunt.loadNpmTasks('grunt-sass'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', );};

Por outro lado, se o mesmo processo for feito com o Gulp, o gulp.js será parecido com isto:

var gulp = require('gulp');var sass = require('gulp-sass');var cleanCSS = require('gulp-clean-css');var uglify = require('gulp-uglify');gulp.task('sass', function () { return gulp.src('assets/scss/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('dist-gulp/css'));});gulp.task('css', , function () { return gulp.src() .pipe(cleanCSS()) .pipe(gulp.dest('dist-gulp/css'));});gulp.task('default', );

Gulp e Grunt são ambos mais fáceis de configurar quando comparados ao Webpack.

Para usar o Webpack, você tem que fazer o seguinte:

• Instalar Nodejs e Npm
• No seu terminal, criar uma pasta Webpack usando mkdir folder-name
• Inicializar o projecto Nodejs usando npm init -y
• Criar os seguintes ficheiros touch index.html webpack.config.js index.js
• Instalar Webpack e servidor Webpack dev usando npm i --save-dev webpack@latest webpack-dev-server@latest
• Instalar Webpack globalmente npm i -g webpack@latest

• Escrever a configuração do Webpack no ficheiro webpack.config.js.

  const webpack = require(‘webpack’);

  let config = { entry: ‘./index.js’, output: { filename: ‘output.js’ }}module.exports = config;

A configuração acima é o start off básico para o Webpack. O Webpack tem vários recursos úteis e pode fazer muito mais. A infinidade de possibilidades descobertas com o Webpack pode justificar as suas complexidades. Leva mais tempo para entender como o Webpack funciona; ele também pode ficar complicado ao gerenciar várias configurações para vários ambientes.

Popularidade

As métricas para medir a popularidade de cada uma dessas ferramentas são diferentes. Grunt já existe muito antes do Gulp, e muitos desenvolvedores já o utilizaram extensivamente. No entanto, de acordo com a pesquisa do Estado do JavaScript 2018, o Webpack é superior ao Gulp e Grunt.

Há um interesse crescente em aprender a usar o Webpack; isto é justificável vendo a ampla gama de possibilidades disponibilizadas através do seu uso.

Tambem utilizando as estatísticas do Github, Webpack, Gulp e Grunt têm acima de 41.000, 30.000 e 11.000 estrelas respectivamente.

Reliabilidade

Gulp, Grunt e Webpack têm uma grande dependência de plugins. Todas as três ferramentas têm grandes comunidades onde as questões poderiam ser abordadas e corrigidas. Para Gulp e Grunt, há uma grande dependência do autor do plugin para manter os plugins, e às vezes, há pouca ou nenhuma documentação a ser analisada quando um problema está sendo enfrentado. O resultado geralmente é esperar que esses autores façam atualizações ou resolvam corrigi-los você mesmo. Entretanto, a maioria dos plugins do Webpack são mantidos pela equipe central do Webpack enquanto o resto é gerenciado pela comunidade do Webpack; e isso o torna mais confiável.

Extensibilidade

Gulp, Grunt e Webpack foram melhorados nos últimos anos. Todos eles têm mais espaço para plugins mais novos e ainda mais eficientes e padronizados.

Alguns usuários do Grunt estão começando a adotar o Gulp porque ele permite piping, e isso explica porque se diz que o Grunt terá em breve uma atualização que também permite piping. Piping permite que usuários do gulp anexem a saída de uma tarefa a outra dependência, tornando o código mais curto e para trabalhar mais rápido.

Atualmente, o Gulp parece mais extensível do que o Grunt porque quando o projeto escalona, não é tão difícil gerenciar o arquivo gulp. Gulp usa plugins que executam uma única tarefa ao contrário do Grunt onde um plugin pode executar várias tarefas.

Webpack pode ser estendido mesmo além de sua funcionalidade principal com a ajuda de plugins e carregadores, sendo o único problema as complicações que podem surgir durante a configuração do mesmo. No entanto, como o Webpack agrupa todos os módulos que têm dependências, não é tão trabalhoso trabalhar mesmo em grandes projetos Webpack.

Na hora de escrever, Grunt tem 6.459 plugins em seu registro de plugins, enquanto Gulp tem 3.672 plugins listados em seu próprio registro de plugins. Com tantos plugins para ambos, é provável que você encontre um plugin para fazer o que você precisar.Webpack tem seu próprio conjunto de plugins oficiais listados aqui, e uma lista de outros plugins de terceiros que podem ser encontrados em awesome-webpack.

Conclusion

Webpack é similar a uma combinação de Gulp/Grunt e Browserify. Webpack é um pouco necessário para projetos que têm intenções de escalar. É por isso que ele é frequentemente usado com React ou Angular.

Gulp e Gulp podem ser usados quando o projeto é moderado, ou razoavelmente grande. Se você está realmente confortável para escrever funções JS, então Gulp é aconselhável, mas, se você preferir escrever configurações de tarefas, então Grunt será suficiente.