23

Gulp - Automatizador de tarefas de front-end

Embed Size (px)

Citation preview

Page 1: Gulp - Automatizador de tarefas de front-end
Page 2: 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

Page 3: Gulp - Automatizador de tarefas de front-end

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”.

Page 4: Gulp - Automatizador de tarefas de front-end

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.

Page 5: Gulp - Automatizador de tarefas de front-end

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.

Page 6: Gulp - Automatizador de tarefas de front-end

Grunt - Exemplo

Page 7: Gulp - Automatizador de tarefas de front-end

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

Page 8: Gulp - Automatizador de tarefas de front-end

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.

Page 9: Gulp - Automatizador de tarefas de front-end

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.

Page 10: Gulp - Automatizador de tarefas de front-end

Gulp - Exemplo

Page 11: Gulp - Automatizador de tarefas de front-end

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

Page 12: Gulp - Automatizador de tarefas de front-end

Cenário

Page 13: Gulp - Automatizador de tarefas de front-end

NodeJS - package.json

Page 14: Gulp - Automatizador de tarefas de front-end

gulpfile.js

Page 15: Gulp - Automatizador de tarefas de front-end

Tasks

Page 16: Gulp - Automatizador de tarefas de front-end

Deletando arquivos e diretórios

Page 17: Gulp - Automatizador de tarefas de front-end

Concatenando css

Page 18: Gulp - Automatizador de tarefas de front-end

Concatenando e minificando JS

Page 19: Gulp - Automatizador de tarefas de front-end

Minificando HTML

Page 20: Gulp - Automatizador de tarefas de front-end

Otimizando imagens

Page 21: Gulp - Automatizador de tarefas de front-end

Watch - Monitorando arquivos

Page 22: Gulp - Automatizador de tarefas de front-end

Gulp serve

Page 23: Gulp - Automatizador de tarefas de front-end

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