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