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

Post on 20-Jan-2017

462 views 1 download

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

Automatizando tarefas com Gulp.js

João Gabriel Lima@jgabriel_lima

linkedin.com/in/joaogabriellima

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.

http://gulpjs.com/

Para que serve e por que eu devo utilizar?

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

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!

Vamos falar de pré-processadores

Alguns exemplos de pré-processadoresMarkdownHAMLSlimJadeCoffeeKup

SassLessStylus Compass

CoffeeScriptLiveScriptTypeScriptBabelProcessing.js

Alguns exemplos

http://dillinger.io/

Iniciando os trabalhosPré-requisitos

nodejs.org

npm install -g gulp

gulp -v

LET’S CODE

Exemplo 1:

Realizando testes no javascript

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

npm init

npm install gulp --save-dev

npm install gulp-jshint --save-dev

Exemplo 2:

Minificando Html, CSS, 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/'));

});

● 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

Exemplo 3:

Otimizando Imagens

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

Exemplo 4:

Browser Sync e Watch Task

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

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

https://html5boilerplate.com/

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

Explore mais plugins...

http://gulpjs.com/plugins/

Obrigado!

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

Automatizando tarefas com Gulp.js

João Gabriel Lima@jgabriel_lima

linkedin.com/in/joaogabriellima