Arquivo da tag: Grunt

Gulp, Grunt ou Webpack?

No meu post anterior, (Utilizando o Visual Studio Code para desenvolver com TypeScript), falei sobre como utilizar o Visual Studio Code para desenvolver sua aplicação com TypeScript. Caso não esteja familiarizado com TypeScript, veja o primeiro post da série: JavaScript e TypeScript – Breve histórico, definição e primeiros passos.

Parte do sucesso de um projeto depende de um bom setup, ou seja, de como você o configura para facilitar a sua vida durante o tempo de desenvolvimento.

No ciclo de vida de uma aplicação, é comum que novos recursos sejam adicionados a aplicação e, com isso, apareça a necessidade de instalação de uma nova versão da aplicação. Ou, durante o tempo de desenvolvimento mesmo seja necessário copiar as referências de terceiros de uma pasta para um local onde você possa rodar a aplicação e ver se suas modificações funcionaram, ou ainda, minificar e fazer o bundle dos arquivos que você utilizou para desenvolver para que sejam otimizados para o ambiente de execução.

É importante lembrar que uma aplicação web, ou melhor a parte correspondente ao client de uma aplicação web, consiste basicamente de arquivos JavaScript, HTML (estrutura da página), CSS (formatação da aparência), arquivos estáticos (imagens, fontes e outros recursos utilizados na página) e APIs para comunicação com o servidor. Dessa forma, sempre que um usuário acessar sua aplicação, o browser fará o download desses arquivos para o computador do usuário e qualquer otimização que você conseguir apresentar terá um impacto grande na experiência do usuário.

Enfim, seja qual for o motivo, uma coisa é certeza: você acabará executando tarefas repetitivas e, como programadores, nossa tarefa é automatizar esse tipo de tarefa sempre que possível.

Com esse intuito, surgiram várias ferramentas no mercado. Muito provavelmente você deve ter ouvido falar de pelo menos uma delas: Webpack, Gulp ou Grunt.

Se eu tivesse que traçar uma linha do tempo, diria dessa forma: muitos desenvolvedores começaram com o Grunt, depois mudaram para o Gulp e, atualmente, estão no Webpack. Mas no fim, é uma escolha muito pessoal. Alguns desenvolvedores combinam Gulp + Webpack para a realização de tarefas, mas essencialmente, você pode escolher qualquer um deles e ser feliz.

Por definição, tanto Gulp quanto Grunt são Task-Runners, enquanto o Webpack é um module bundler.

Para ajudar na decisão, a linha de tendência de acordo com o Google:

Particularmente, eu comecei com o Grunt e depois fui direto para o Webpack. Mas novamente, isso é uma escolha puramente pessoal e de acordo com o time que você está inserido.

O que você precisa saber:

Todos são customizáveis (alguns mais e outros menos) e possuem um ecossistema interessante de plugins para facilitar nas tarefas mais comuns e lidar com casos de exceção particulares ao seu projeto.

Grunt

As configurações são baseados em declarações, veja o exemplo abaixo.

Por isso, tende a ficar meio bagunçado conforme o arquivo cresce e novas tarefas são adicionadas. A tendência, atualmente, é não utilizá-lo mais.

Gulp

Ao contrário do Grunt, no Gulp as tarefas são funções JavaScript. Existem times que preferem configurações (naturalmente irão para o Grunt) ou times que preferem código.

Apesar de EU nunca ter utilizado o Gulp, vendo os exemplos de arquivos de configuração na internet tenho a impressão de que eles são mais simples, mais fáceis de serem mantidos e de melhor entendimento.

Outro fator interessante é que ele é mais rápido do que o Grunt, e tira vantagem do recursos de Streams disponível no Node. Notem o uso do Pipe no código.

Webpack

O webpack trabalha analisando todo o seu projeto e gera um mapa de dependências. É bem útil em projetos que utilizam vários assets que não são somente código, como fontes, imagens, css e etc.

A desvantagem do webpack é que ele pode parecer mais complexo de configurar, principalmente no início.

Após o mapa de dependência estar definido, o webpack utiliza as configurações pré-definidas para processar as dependências e gerar o resultado final.

Um conceito muito utilizado é o de Loaders, onde você define quais plugins serão executados quando o Webpack encontrar um tipo específico de arquivos.

No exemplo acima, o webpack utilizará o babel-loader para todos os arquivos do tipo .js que existirem no projeto.