Gulp - Automatizador de tarefas de front-end
-
Upload
mario-mendonca -
Category
Software
-
view
80 -
download
0
Transcript of Gulp - Automatizador de tarefas de front-end
Jackson VeronezeSoftware Developer
[email protected]://jacksonveroneze.comhttps://br.linkedin.com/in/jacksonveroneze
Mario MendonçaSoftware Developer
[email protected]://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