Vamos automatizar! Conheça o Gulp Js
-
Upload
yan-magalhaes -
Category
Technology
-
view
249 -
download
4
Transcript of Vamos automatizar! Conheça o Gulp Js
![Page 1: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/1.jpg)
Vamos Automatizar!
Conheça o Gulp JS.
![Page 2: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/2.jpg)
● Yan Magalhães Leite.
● 21 anos,
● Desenvolvedor Web na Construsite Brasil.
● Cursando Ciências da Computação.
● Participante de fóruns,grupos e eventospromovidos pela comunidade.
Quem Sou Eu?
![Page 3: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/3.jpg)
● Conceitos e primórdios da automatização.
● Por quê precisamos automatizar?
● Introdução ao Gulp.
● Principais vantagens.
● Exemplos e utilização.
Agenda:
![Page 4: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/4.jpg)
“Não é o mais forte que sobrevive, nem o mais inteligente, mas o que melhor se
adapta às mudanças.” (Charles Darwin)
![Page 5: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/5.jpg)
![Page 6: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/6.jpg)
A evolução é um processo natural.
![Page 7: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/7.jpg)
A automatização é um dos resultados da evolução.
![Page 8: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/8.jpg)
AUTOMATIZAR???
![Page 9: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/9.jpg)
Automação (do latim Automatus, que significa mover-se por si) é um sistema automático de controle pelo qual os mecanismos verificam seu próprio funcionamento, efetuando medições e introduzindo correções, sem a necessidade da interferência do homem. Ela diminui os custos e aumenta a velocidade da produção. (2004 - Lacombe)
Conceito:
![Page 10: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/10.jpg)
Pode ser definida como um conjunto de técnicas que podem ser aplicadas sobre um processo, com o objetivo de torná-lo mais eficiente, maximizando a produção e com menor consumo de energia ou recursos.
https://prezi.com/monbpk60_bx0/automacao-da-producao/
Conceito:
![Page 11: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/11.jpg)
![Page 12: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/12.jpg)
As linguagens e ferramentas que utilizamos no dia-a-dia, também evoluem.
![Page 13: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/13.jpg)
● A medida em que as linguagens e ferramentas evoluem, maiores são as possibilidades e opções.
● Quanto mais opções, maiores são as formas para se resolver um problema.
![Page 14: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/14.jpg)
● Nosso tempo é curto.
● Temos várias tarefas para nos preocupar.
● Não iremos lembrar de tudo.
● Evitar realizar tarefas repetidamente.
Por quê precisamos automatizar?
![Page 15: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/15.jpg)
● Possibilidade de utilizar diversas ferramentas, simultaneamente.
● Economia de Tempo
● Manter o foco no que realmente importa: o projeto e o seu resultado final.
Por quê precisamos automatizar?
![Page 16: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/16.jpg)
● Ant(Java)
● Rake(Ruby)
● Grunt, Gulp e Broccoli(Javascript)
https://gist.github.com/callumacrae/9231589
Alguns automatizadores no mercado:
![Page 18: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/18.jpg)
● Ferramenta para a automatização de tarefas e aumentar o seu fluxo de trabalho.
● Feito em Javascript.
● Para o seu uso é necessário a instalação do Node JS.
Gulp JS:
![Page 19: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/19.jpg)
● Minificação de arquivos.
● Concatenação de arquivos.
● Pré-processar arquivos CSS.
● Criar sprites automaticamente.
O que podemos utilizar?
![Page 20: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/20.jpg)
● Otimizar imagens.
● Checar a qualidade do nosso código.
● Live Reload.
● Executar testes de performance/unitários.
● Deploy.
O que podemos utilizar?
![Page 29: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/29.jpg)
![Page 30: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/30.jpg)
**Dados retirados em 12/05/2015
Gulp JS Grunt JS Broccoli JS
Criado em: 2014 Criado em: 2013 Criado em: 2014
Stars no Github: ~13.600
Stars no Github: ~9.475
Stars no Github: ~2.169
Quant. Plugins: ~1.577
Quant. Plugins: ~4.672
Quant. Plugins: ~221
Menos plugins Muitos plugins Mais instável
Mais rápido; Fácil de utilizar.
Mais lento; Curva de aprendizagem mais acentuada.
Mais rápido; Possibilidade de acompanhar a evolução do projeto.
![Page 31: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/31.jpg)
● Instalação do Node JS.
● Instalação do Gulp JS.
● Criação do arquivo package.json.
● Instalar os módulos necessários.
● Criação do arquivo gulpfile.js.
Primeiros passos com o Gulp JS:
![Page 32: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/32.jpg)
VAMOS PRATICAR.
![Page 33: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/33.jpg)
● gulp.src
Indicamos em qual diretório e em quais arquivos queremos realizar alguma tarefa.
● gulp.dest
Indicamos para qual diretório queremos enviar os arquivos que foram modificados por alguma tarefa.
Comandos básicos:
![Page 34: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/34.jpg)
● gulp.task
Realizamos a criação das tarefas.
● pipe()
Responsável por indicar qual o módulo deverá ser executado, para a realização de uma determinada tarefa.
Comandos básicos:
![Page 35: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/35.jpg)
Alguns módulos que podemos utilizar:
![Page 36: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/36.jpg)
Minificar arquivos .JS utilizando o UglifyJS.
npm install --save-dev gulp-uglify
https://www.npmjs.com/package/gulp-uglify/
Gulp-Uglify
![Page 37: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/37.jpg)
Concatenar arquivos.
npm install --save-dev gulp-concat
https://www.npmjs.com/package/gulp-concat/
Gulp-Concat
![Page 38: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/38.jpg)
Plugin para a utlização do JS Hint.
npm install --save-dev gulp-jshint
https://www.npmjs.com/package/gulp-jshint/
Gulp-Jshint
![Page 39: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/39.jpg)
Reduzir o tamanho das imagens PNG,JPG, GIF e SVG.
npm install --save-dev gulp-imagemin
https://www.npmjs.com/package/gulp-imagemin/
Gulp-Imagemin
![Page 40: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/40.jpg)
Minificar arquivos .CSS.
npm install --save-dev gulp-cssmin
https://www.npmjs.com/package/gulp-cssmin
Gulp-Cssmin
![Page 41: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/41.jpg)
Minificar arquivos .HTML.
npm install --save-dev gulp-htmlmin
https://www.npmjs.com/package/gulp-htmlmin/
Gulp-Htmlmin
![Page 42: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/42.jpg)
Mais métodos:
![Page 43: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/43.jpg)
Compilar arquivos .LESS.
npm install --save-dev gulp-less
https://www.npmjs.com/package/gulp-less/
Gulp-Less
![Page 44: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/44.jpg)
Compilar arquivos .SASS.
npm install --save-dev gulp-sass
https://www.npmjs.com/package/gulp-sass/
Gulp-Sass
![Page 45: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/45.jpg)
Compilar arquivos .STYL.
npm install --save-dev gulp-stylus
https://www.npmjs.com/package/gulp-stylus/
Gulp-Stylus
![Page 46: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/46.jpg)
Visualizar as modificações rapidamente no browser.
**Necessita da extensão do livereload.
npm install --save-dev gulp-livereload
https://www.npmjs.com/package/gulp-livereload/
Gulp-Livereload
![Page 47: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/47.jpg)
Realizar o deploy para o seu servidor.
**Necessita que o rsync esteja instalado em seu computador.***Para Windows - https://www.cygwin.com/
npm install --save-dev gulp-rsync
https://www.npmjs.com/package/gulp-rsync/
Gulp-Rsync
![Page 48: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/48.jpg)
Obter um report da nossa página segundo as métricas do PageSpeed Insights.
npm install --save-dev psi
https://www.npmjs.com/package/psi
Psi
![Page 49: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/49.jpg)
Obter um report da nossa página quanto ao nível de acessibilidade que ela possui, através das recomendações do WCAG(Web Content Accessibility Guidelines).
npm install --save-dev gulp-accessibility
https://www.npmjs.com/package/gulp-accessibility/
Gulp-Accessibility
![Page 50: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/50.jpg)
Acompanhar as alterações realizadas em seus arquivos.
npm install --save-dev gulp-watch
https://www.npmjs.com/package/gulp-watch/
Gulp-Watch
![Page 51: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/51.jpg)
● Qualidade.
● Organização.
● Performance(Diminuímos a quantidade dos arquivos a serem baixados pelo browser).
● Tempo.
Os benefícios:
![Page 52: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/52.jpg)
![Page 53: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/53.jpg)
● http://gulpjs.com/
● http://gulpjs.com/plugins/
● https://www.npmjs.com/
● http://perf-tooling.today/
Links úteis:
![Page 54: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/54.jpg)
● https://gist.github.com/YanMagale/f897e1101a1fc60743db
● https://github.com/YanMagale/gulp_stardart
Links úteis:
![Page 55: Vamos automatizar! Conheça o Gulp Js](https://reader031.fdocument.pub/reader031/viewer/2022020106/55c114c7bb61eb3a6b8b457c/html5/thumbnails/55.jpg)
OBRIGADO!
Github:https://github.com/yanmagale
Twitter:https://twitter.com/yaanmagale