Nos tempos em que o JavaScript não era tão popular, os desenvolvedores de software não usavam ferramentas de construção como Grunt, Gulp ou webpack. Porém, com o aumento do escopo de trabalho e da complexidade do software, surgiu a necessidade de acompanhar o desempenho do aplicativo, a conformidade da segurança e a produtividade da equipe.
Atualmente, um fluxo de trabalho de muitas empresas é baseado em ferramentas como Grunt e Gulp para ajudar os desenvolvedores de software a automatizar uma variedade de operações de rotina. E, é claro, muitas equipes de todo o mundo usam o webpack para agrupar seus arquivos JavaScript.
Neste artigo, abordarei os prós e contras de ferramentas como Grunt, Gulp, webpack e Browserify.
Índice
- Por que usar ferramentas de construção?
- A luta dos corredores de tarefas: Grunt vs. Gulp
- A luta dos gerentes de pacotes: Browserify vs. webpack
- Comunidade
- Empacotando
Por que usar ferramentas de construção?
Como sabe, as ferramentas de criação são projetadas para salvar os desenvolvedores de software das tarefas rotineiras. Alguns deles são:
- Pré-processamento e pré-processamento automático de CSS
- Minificação e concatenação
- Excluindo Comandos do Depurador e do Console
- Iniciando testes de unidade
- Otimização de imagem
As tarefas acima e similares não são tão difíceis, mas levam muita energia e tempo para serem concluídas. Isso é especialmente verdade quando se trata de grandes projetos com a necessidade de atualizações constantes.
Usando um executor de tarefas Gulp ou qualquer outro, pode automatizar tarefas de rotina e, como resultado, simplificar o fluxo de trabalho e melhorar a produtividade.
Outra vantagem inegável das ferramentas de construção é que elas podem agrupar vários arquivos JavaScript em um pacote. Por sua vez, o servidor recebe menos solicitações e demonstra maior desempenho.
Finalmente, a funcionalidade das ferramentas de construção não se limita aos pontos mencionados acima, pois existem milhares de plugins que ampliam seus recursos. E essa é provavelmente a melhor coisa sobre ferramentas de construção.
Vamos agora falar sobre essas ferramentas mais especificamente.
A luta dos corredores de tarefas: Grunt vs. Gulp
Ambas as ferramentas foram projetadas para permitir que rastreie arquivos adicionados recentemente, bem como alterações feitas em arquivos já existentes em diretórios específicos. Além disso, Grunt e Gulp permitem criar tarefas. Quando alguns arquivos específicos são configurados, essas tarefas também são aplicadas aos seguintes arquivos criados ou alterados.
É a hora de falar sobre as principais diferenças de Grunt e Gulp.
Peculiaridades Funcionais
Primeiro de tudo, esses executores de tarefas funcionam de maneira diferente:
- Enquanto Grunt usa arquivos temporários, o Gulp usa fluxos de nós.
- Gulp é capaz de executar várias tarefas ao mesmo tempo, enquanto Grunt executa tarefas uma após a outra.
O que isso significa? Digamos que trabalhou com o SASS e deseja compilá-lo agora. Nesse caso, o Grunt executará cada operação e salvará os resultados em uma exibição de um arquivo temporário . Em seguida, o autoprefixer aparece em cena para otimizar os prefixos do fornecedor e salvá-los em um arquivo de destino.
Por falar em Gulp, ele realizará essas operações na memória . Esse executor de tarefas lida com a compilação do arquivo SASS, o envia instantaneamente para o gulp-autoprefixer e salva os resultados em um arquivo de destino.
Em outras palavras, o Gulp não precisa de tempo e recursos extras para operar com arquivos temporários em comparação com o Grunt. Geralmente, os procedimentos executados na memória são considerados mais rápidos do que os que requerem o envolvimento de uma unidade.
Plugins
O Gulp normalmente é tratado como um lugar melhor para escrever plug-ins personalizados. Isso se deve à melhor legibilidade do código, tornando a criação de extensões um processo bastante simples. Mas lembre-se de que deve estar familiarizado com os fluxos do Node.js. para criar um.
No caso do Grunt, trata-se mais de configurar do que de codificar. A configuração dos plugins para o Grunt pode levar mais tempo, no entanto, geralmente é muito fácil graças à interface amigável.
É tudo sobre preferências e familiaridade e, portanto, é difícil dizer qual desses dois executores de tarefas é melhor do ponto de vista do uso de plug-ins.
Rapidez
É hora de lançar luz sobre a velocidade do desempenho. Antes de fazer isso, deixe-me enfatizar mais uma vez que o Gulp é assíncrono e pode processar vários arquivos por vez, enquanto o Grunt tem uma abordagem consistente e pode lidar com uma operação de cada vez.
De acordo com o teste da TMWtech, Grunt e Gulp precisam de 2,3 e 1,3 segundos, respectivamente, para compilar um arquivo SASS. Isso significa que Grunt é quase duas vezes mais rápido que Gulp.
Embora não seja provável que sinta a diferença de um segundo trabalhando em um projeto pequeno, ela pode ser bastante tangível para um projeto grande, em que dezenas de tarefas precisam ser automatizadas.
A luta dos gerentes de pacotes: Browserify vs. webpack
O que dizer, a linha entre gerenciadores de pacotes e executores de tarefas está ficando cada vez mais embaçada ao longo do tempo. Mas o que distingue os gerentes de pacotes dos executores de tarefas é o foco na criação de ativos. Browserify e webpack são os gerenciadores de pacotes mais populares atualmente.
Browserify
Essa ferramenta JavaScript de código aberto é criada para executar o código baseado no Node.js. nos navegadores e unir vários módulos separados em um único arquivo. O Browserify é uma ferramenta de agregação pura, diferente do webpack. E, portanto, carece de vários recursos úteis de um executor de tarefas.
Como solução para esse problema, pode usar Grunt ou Gulp além do Browserify. O outro lado da moeda é que há muito trabalho de configuração que deve fazer para definir essas duas ferramentas para cada projeto a seguir.
webpack
O webpack está se tornando cada vez mais popular com o tempo. Uma das razões para isso é que ele é instalado automaticamente assim que baixa o Angular.
Então, como o webpack funciona? Primeiro, a ferramenta obtém os arquivos do seu projeto (como CSS, JS) que, por sua vez, têm certas dependências entre si. Depois, ele une esses arquivos em uma versão de pacote configurável que pode ser lida pelos navegadores.
Como o webpack é capaz de executar a mesma operação que o Gulp, não é necessário usá-los juntos. Essa necessidade pode surgir apenas no caso de já ter configurado uma tarefa no Gulp e não querer abandoná-la.
Além da funcionalidade acima mencionada, o webpack também é capaz de:
- Identificar o código que não é usado para excluí-lo durante a união dos arquivos do projeto.
- Serializar código.
- Rastrear alterações no arquivo.
- Relançar de tarefas.
- etc.
Mais um benefício inegável do webpack é o suporte a arquivos como imagens. É possível incorporá-los como qualquer arquivo de código no seu projeto. Além disso, o webpack é conhecido por outro recurso: ele carrega apenas os arquivos que são necessários no momento para os usuários começarem a navegar em uma página. Isso diminui o consumo do poder de computação dos usuários e influencia positivamente no desempenho geral dos aplicativos da web.
Por fim, devo mencionar a disponibilidade de um recurso como o Hot Reloading, projetado para renderizar rapidamente o seu aplicativo Web em navegadores. Também pode se deparar com o tópico de recarga quente em várias comparações entre Flutter e React Native, pois essas duas estruturas utilizam esse recurso.
Comunidade
Todos sabemos que a comunidade é o que realmente torna uma ou outra tecnologia excelente e utilizável. Se olhar as estatísticas do Github dessas ferramentas, verá o seguinte:
- webpack – 42K de estrelas.
- Gulp – 30K de estrela.
- Browserify – 12K de estrelas.
- Grunt – 11K de estrelas.
Empacotar
Portanto, descobrimos que a principal distinção do Browserify é que ele pode precisar do suporte de outras ferramentas como Grunt ou Gulp. No que diz respeito ao webpack, é uma solução tudo-em-um que possui todos os recursos necessários.
Ao mesmo tempo, o Browserify é muito simples de aprender e usar, sob a condição de já ter experiência com o Grunt ou Gulp. É uma boa opção para pequenos projetos com uma estrutura simples, na qual toneladas de funcionalidades do webpack podem parecer excessivas.
Fonte: Vitaly Kuprenko