automatize suas tarefas: conheça o gulpjs

Hello GulpConheça o mundo da automatização de tarefas.

“Não é o mais forte que sobrevive, nem o mais inteligente, mas o que melhor se adapta às mudanças. “ (Charles Darwin)

09/09/2013...

05/11/2014

09/09/2013...

05/11/2014

As linguagens e ferramentas que utilizamos também evoluem.

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

2005-2006

2011

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/)

O que é

Com ele, conseguimos desenvolver nossas aplicaçãoes, utilizando apenas a linguagem Javascript.

Indo além

● Npm: Gerenciador de pacotes

● package.json

O que ele trouxe ??

O que veio após o Node JS ??

O que é:

● Ferramenta para a automatização de tarefas, feita em Javascript.

● Esta ferramenta funciona em cima do NodeJS

O que é necessário ?

● Instalar os módulos desejados.

● gulpfile.js

● Configurar nossas tarefas.

Automatizar …

Por que devemos automatizar ??

● Nosso tempo é curto.

● Temos várias tasks para nos preocupar.

● Não vamos lembrar de tudo

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.

● Minificação de Arquivos

● Concatenação de Arquivos

● Pre-processar CSS

O que podemos utilizar ?

● Otimizar Imagens

● Live Reload

● Tarefas Personalizadas

O que podemos utilizar ?

gulp-uglify● Minificar arquivos

var uglify = require('gulp-uglify');

gulp.task('compress', function() { gulp.src('lib/*.js') .pipe(uglify()) .pipe(gulp.dest('dist'))});

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/'))});

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'));});

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

});

Mas … é só isso ??

http://gulpjs.com/plugins/

Indo além

Em que ganhamos ? Quais as vantagens ?● Qualidade

● Performance(Diminuímos requests e o tamanho dos arquivos)

Em que ganhamos ? Quais as vantagens ?

● Organização

● Tempo

Tudo isso e muito mais ….

… com apenas 1 ferramenta.

Os nossos projetos agradecem.

O usuário agradece.

Let’s Practice

It’s Demo Time

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/

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/

Obrigado!

https://speakerdeck.com/yanmagale