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