[Estácio - IESAM] Automatizando Tarefas com Gulp.js

33
Automatizando tarefas com Gulp.js João Gabriel Lima @jgabriel_lima linkedin.com/in/joaogabriellima

Transcript of [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Page 1: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Automatizando tarefas com Gulp.js

João Gabriel Lima@jgabriel_lima

linkedin.com/in/joaogabriellima

Page 2: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

linkedin.com/in/

joaogabriellima

IT Hacker, Docente, Instrutor em

treinamentos, Co-fundador da Huddle3,

Senior AI Engineer na NexusEdge.

Doutorando em Computação Aplicada

com ênfase em Inteligência Artificial,

Mineração de Dados e BigData.

Page 3: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

http://gulpjs.com/

Page 4: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Para que serve e por que eu devo utilizar?

Page 5: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Automatizadores de tarefa são ferramentas que ajudam programadores a realizarem

tarefas repetitivas e essenciais para o desenvolvimento como: concatenação de

arquivos, minificação, testes...

Page 6: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Fácil de usar:

Ao preferir código ao invés de configuração, Gulp mantém simples o que é simples e faz tarefas complexas mais bem administráveis.

Eficiente:

Gulp usa o poder de streams do Node, o que permite builds muitos mais rápidos e dispensa a necessidade de gravação de arquivos intermediários em disco.

Alta qualidade:

As diretrizes estritas para plugins do Gulp garantem que seus plugins permaneçam simples e trabalhem da maneira que se espera.

Fácil de aprender:

Com uma API mínima, aprende-se a trabalhar com o Gulp quase que na hora!

Page 7: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Vamos falar de pré-processadores

Page 8: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Alguns exemplos de pré-processadoresMarkdownHAMLSlimJadeCoffeeKup

SassLessStylus Compass

CoffeeScriptLiveScriptTypeScriptBabelProcessing.js

Page 9: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Alguns exemplos

Page 10: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

http://dillinger.io/

Page 11: [Estácio - IESAM] Automatizando Tarefas com Gulp.js
Page 12: [Estácio - IESAM] Automatizando Tarefas com Gulp.js
Page 13: [Estácio - IESAM] Automatizando Tarefas com Gulp.js
Page 14: [Estácio - IESAM] Automatizando Tarefas com Gulp.js
Page 15: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Iniciando os trabalhosPré-requisitos

Page 16: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

nodejs.org

Page 17: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

npm install -g gulp

gulp -v

Page 18: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

LET’S CODE

Page 19: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Exemplo 1:

Realizando testes no javascript

Page 20: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

/exemplo1- index.html-script.js- style.css

npm init

npm install gulp --save-dev

npm install gulp-jshint --save-dev

Page 21: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Exemplo 2:

Minificando Html, CSS, JS

Page 22: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

var minifyHTML = require('gulp-minify-html');

gulp.task('minify-html', function() {

var opts = {conditionals: true,spare:true};

return gulp.src('./static/html/*.html').pipe(minifyHTML(opts)).pipe(gulp.dest('./dist/'));

});

Page 23: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

● empty - remove atributos vazios

● comments - remove comentários

● conditionals - remove comentários condicionais para

Internet Explorer

● spare - remove atributos redundantes

● loose - preserva os espaços em branco

Page 24: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Exemplo 3:

Otimizando Imagens

Page 25: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

https://www.npmjs.com/package/gulp-imagemin

Page 26: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Exemplo 4:

Browser Sync e Watch Task

Page 27: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

https://www.npmjs.com/package/gulp-deploy-ftp

Page 28: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Você não precisa fazer tudo DO ZERO...

Page 29: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

https://html5boilerplate.com/

Page 30: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

https://github.com/tomaszbujnowicz/html5-boilerplate-gulp-less

Page 31: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Explore mais plugins...

http://gulpjs.com/plugins/

Page 32: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Obrigado!

https://github.com/jgabriellima/aula-gulpjs-iesam

Page 33: [Estácio - IESAM] Automatizando Tarefas com Gulp.js

Automatizando tarefas com Gulp.js

João Gabriel Lima@jgabriel_lima

linkedin.com/in/joaogabriellima