Gulp - Automatizador de tarefas de front-end

Jackson VeronezeSoftware Developer

jackson@jacksonveroneze.comhttps://jacksonveroneze.comhttps://br.linkedin.com/in/jacksonveroneze

Mario MendonçaSoftware Developer

mario.mendonca@gmail.comhttps://br.linkedin.com/in/mario-mendonca

O que é?

Conhecido como “automatizador de tarefas”, “executor de tarefas”, dentre outros termos do gênero;

Se autointitula um build system, algo como um “sistema de construção” ou “sistema de compilação”.

Automatizadores de tarefa

Automatizadores de tarefa são ferramentas que ajudam programadores a realizarem tarefas repetitivas mas essenciais para o desenvolvimento como:

Concatenação de arquivos

Minificação

Testes

E muitas outras coisas necessárias para a criação de um código rápido e eficiente.

Um pouco do Grunt

Muito conhecido na área de front-end, foi criado em 2012 por Ben Alman.

Funciona através da configuração de um arquivo chamado Gruntfile.js, que gerencia os vários plugins do ecossistema e cria arquivos intermediários no disco (temporários), até gerar o arquivo final desejado.

Grunt - Exemplo

Considerações

Pontos fortes do Grunt

Comunidade grande

Muitos plugins

Pontos fracos do GruntArquivos de configuração muito grandes

Grande número de parâmetros para cada plugin

Processamento lento quando utiliza arquivos muitos grandes

Linha de aprendizado um pouco maior

Criação de arquivos temporários

Um pouco do Gulp

O Gulp foi criado na metade de 2013 por Eric Schoffstall

Objetivo de simplificar e agilizar o processo, utilizando streams.

A informação é transmitida através das tarefas usando o método de pipeline, o que reduz o número de operações I/O.

Por que Gulp?

O Gulp é muito mais rápido que o Grunt, já que faz uso das streams do nodejs para escrever arquivos diretamente para o disco, dispensando intermediários.

Sem falar na simplicidade do Gulpfile(equivalente ao Gruntfile), que utiliza uma sintaxe de código semelhante ao código comum do nodejs.

Gulp - Exemplo

Considerações

Pontos fortes do GulpMelhor performance

Arquivo de configuração pequeno e mais fácil de ler

Linha de aprendizado menor

Evita criação de arquivos temporários

Facilidade de uso através dos 5 comandos principais da API

Plugins mais simples e menores

Utilização de bibliotecas-padrão em vez de plugins para tudo

As tarefas são executadas com o máximo de concorrência

Pontos fracos do GulpMenos plugins que o Grunt (precisa mesmo de tantos?)

Comunidade menor

Cenário

NodeJS - package.json

gulpfile.js

Tasks

Deletando arquivos e diretórios

Concatenando css

Concatenando e minificando JS

Minificando HTML

Otimizando imagens

Watch - Monitorando arquivos

Gulp serve

Referências

http://tableless.com.br/gulp-o-novo-automatizador/

https://github.com/jacksonveroneze/task-list

http://desenvolvimentoparaweb.com/javascript/gulp/

http://tableless.com.br/gulp-o-novo-automatizador/

http://imasters.com.br/desenvolvimento/por-que-usar-gulp/?trace=1519021197&source=single