CONHEÇA HIDROLÂNDIA - UIBAÍ CONHEÇA HIDROLÂNDIA - UIBAÍ BOA AULA.
Automatize suas tarefas: conheça o GulpJS.
-
Upload
yan-magalhaes -
Category
Technology
-
view
378 -
download
1
description
Transcript of Automatize suas tarefas: conheça o GulpJS.
![Page 1: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/1.jpg)
Hello GulpConheça o mundo da automatização de tarefas.
![Page 2: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/2.jpg)
“Não é o mais forte que sobrevive, nem o mais inteligente, mas o que melhor se adapta às mudanças. “ (Charles Darwin)
![Page 3: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/3.jpg)
![Page 4: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/4.jpg)
![Page 5: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/5.jpg)
09/09/2013...
05/11/2014
![Page 6: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/6.jpg)
09/09/2013...
05/11/2014
![Page 7: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/7.jpg)
As linguagens e ferramentas que utilizamos também evoluem.
![Page 8: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/8.jpg)
● Quanto maior a evolução das linguagens e ferramentas, maiores são as possibilidades.
● Quanto mais possibilidades, mais opções.
● Quanto mais opções, mais formas para resolver um problema.
![Page 9: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/9.jpg)
![Page 10: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/10.jpg)
2005-2006
2011
![Page 11: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/11.jpg)
![Page 12: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/12.jpg)
O que é
É uma plataforma construída sobre o motor JavaScript do Google Chrome (V8) , para facilmente construir aplicações de rede rápidas e escaláveis. (http://nodebr.com/o-que-e-node-js/)
![Page 13: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/13.jpg)
O que é
Com ele, conseguimos desenvolver nossas aplicaçãoes, utilizando apenas a linguagem Javascript.
![Page 14: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/14.jpg)
Indo além
● Npm: Gerenciador de pacotes
● package.json
![Page 15: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/15.jpg)
O que ele trouxe ??
O que veio após o Node JS ??
![Page 16: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/16.jpg)
![Page 17: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/17.jpg)
![Page 18: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/18.jpg)
O que é:
● Ferramenta para a automatização de tarefas, feita em Javascript.
● Esta ferramenta funciona em cima do NodeJS
![Page 19: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/19.jpg)
O que é necessário ?
● Instalar os módulos desejados.
● gulpfile.js
● Configurar nossas tarefas.
![Page 20: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/20.jpg)
Automatizar …
![Page 21: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/21.jpg)
Por que devemos automatizar ??
● Nosso tempo é curto.
● Temos várias tasks para nos preocupar.
● Não vamos lembrar de tudo
![Page 22: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/22.jpg)
Por que devemos automatizar ??
● Evitar fazer as mesmas tarefas várias vezes.
● Economia de Tempo
● Manter o foco no que realmente importa: o projeto e o resultado final.
![Page 23: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/23.jpg)
● Minificação de Arquivos
● Concatenação de Arquivos
● Pre-processar CSS
O que podemos utilizar ?
![Page 24: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/24.jpg)
● Otimizar Imagens
● Live Reload
● Tarefas Personalizadas
O que podemos utilizar ?
![Page 25: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/25.jpg)
gulp-uglify● Minificar arquivos
var uglify = require('gulp-uglify');
gulp.task('compress', function() { gulp.src('lib/*.js') .pipe(uglify()) .pipe(gulp.dest('dist'))});
![Page 26: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/26.jpg)
gulp-concat● Concatenar arquivos
var concat = require('gulp-concat');
gulp.task('scripts', function() { gulp.src('./lib/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dist/'))});
![Page 27: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/27.jpg)
gulp-jshint● Qualidade de código
var jshint = require('gulp-jshint');var gulp = require('gulp');
gulp.task('lint', function() { return gulp.src('./lib/*.js') .pipe(jshint()) .pipe(jshint.reporter('YOUR_REPORTER_HERE'));});
![Page 28: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/28.jpg)
![Page 29: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/29.jpg)
gulp-watch● Acompanhar modificações nos arquivos
var gulp = require('gulp'),
watch = require('gulp-watch');
gulp.task('default', function () {
gulp.src('css/**/*.css')
.pipe(watch('css/**/*.css', function(files) {
return files.pipe(gulp.dest('./one/'));
}))
.pipe(gulp.dest('./two/'));
// `one` and `two` will contain same files
});
![Page 30: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/30.jpg)
Mas … é só isso ??
![Page 31: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/31.jpg)
http://gulpjs.com/plugins/
Indo além
![Page 32: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/32.jpg)
Em que ganhamos ? Quais as vantagens ?● Qualidade
● Performance(Diminuímos requests e o tamanho dos arquivos)
![Page 33: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/33.jpg)
Em que ganhamos ? Quais as vantagens ?
● Organização
● Tempo
![Page 34: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/34.jpg)
Tudo isso e muito mais ….
… com apenas 1 ferramenta.
![Page 35: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/35.jpg)
![Page 36: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/36.jpg)
Os nossos projetos agradecem.
O usuário agradece.
![Page 37: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/37.jpg)
Let’s Practice
It’s Demo Time
![Page 38: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/38.jpg)
Referênciashttps://www.npmjs.org/package/gulp-uglify/https://www.npmjs.org/package/gulp-watch/https://www.npmjs.org/package/gulp-jshint/http://gulpjs.com/http://nodejs.org/ http://tableless.com.br/gulp-o-novo-automatizador/#.UuAJqdJTtQIhttp://blog.caelum.com.br/bye-bye-grunt-js-hello-gulp-js/
![Page 39: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/39.jpg)
Referências - Imagens
http://boieco.blogspot.com.br/2011/12/deu-merda-na-evolucao-do-homem.htmlhttp://br.freepik.com/fotos-gratis/bolo-com-chantilly--cereja--spoon--festa_404149.htm http://www.reactiongifs.com/magic-3/
![Page 40: Automatize suas tarefas: conheça o GulpJS.](https://reader031.fdocument.pub/reader031/viewer/2022013118/559b34f81a28ab39638b472c/html5/thumbnails/40.jpg)
Obrigado!
https://speakerdeck.com/yanmagale