Post on 05-Aug-2015
Vamos Automatizar!
Conheça o Gulp JS.
● Yan Magalhães Leite.
● 21 anos,
● Desenvolvedor Web na Construsite Brasil.
● Cursando Ciências da Computação.
● Participante de fóruns,grupos e eventospromovidos pela comunidade.
Quem Sou Eu?
● Conceitos e primórdios da automatização.
● Por quê precisamos automatizar?
● Introdução ao Gulp.
● Principais vantagens.
● Exemplos e utilização.
Agenda:
“Não é o mais forte que sobrevive, nem o mais inteligente, mas o que melhor se
adapta às mudanças.” (Charles Darwin)
A evolução é um processo natural.
A automatização é um dos resultados da evolução.
AUTOMATIZAR???
Automação (do latim Automatus, que significa mover-se por si) é um sistema automático de controle pelo qual os mecanismos verificam seu próprio funcionamento, efetuando medições e introduzindo correções, sem a necessidade da interferência do homem. Ela diminui os custos e aumenta a velocidade da produção. (2004 - Lacombe)
Conceito:
Pode ser definida como um conjunto de técnicas que podem ser aplicadas sobre um processo, com o objetivo de torná-lo mais eficiente, maximizando a produção e com menor consumo de energia ou recursos.
https://prezi.com/monbpk60_bx0/automacao-da-producao/
Conceito:
As linguagens e ferramentas que utilizamos no dia-a-dia, também evoluem.
● A medida em que as linguagens e ferramentas evoluem, maiores são as possibilidades e opções.
● Quanto mais opções, maiores são as formas para se resolver um problema.
● Nosso tempo é curto.
● Temos várias tarefas para nos preocupar.
● Não iremos lembrar de tudo.
● Evitar realizar tarefas repetidamente.
Por quê precisamos automatizar?
● Possibilidade de utilizar diversas ferramentas, simultaneamente.
● Economia de Tempo
● Manter o foco no que realmente importa: o projeto e o seu resultado final.
Por quê precisamos automatizar?
● Ant(Java)
● Rake(Ruby)
● Grunt, Gulp e Broccoli(Javascript)
https://gist.github.com/callumacrae/9231589
Alguns automatizadores no mercado:
● Ferramenta para a automatização de tarefas e aumentar o seu fluxo de trabalho.
● Feito em Javascript.
● Para o seu uso é necessário a instalação do Node JS.
Gulp JS:
● Minificação de arquivos.
● Concatenação de arquivos.
● Pré-processar arquivos CSS.
● Criar sprites automaticamente.
O que podemos utilizar?
● Otimizar imagens.
● Checar a qualidade do nosso código.
● Live Reload.
● Executar testes de performance/unitários.
● Deploy.
O que podemos utilizar?
**Dados retirados em 12/05/2015
Gulp JS Grunt JS Broccoli JS
Criado em: 2014 Criado em: 2013 Criado em: 2014
Stars no Github: ~13.600
Stars no Github: ~9.475
Stars no Github: ~2.169
Quant. Plugins: ~1.577
Quant. Plugins: ~4.672
Quant. Plugins: ~221
Menos plugins Muitos plugins Mais instável
Mais rápido; Fácil de utilizar.
Mais lento; Curva de aprendizagem mais acentuada.
Mais rápido; Possibilidade de acompanhar a evolução do projeto.
● Instalação do Node JS.
● Instalação do Gulp JS.
● Criação do arquivo package.json.
● Instalar os módulos necessários.
● Criação do arquivo gulpfile.js.
Primeiros passos com o Gulp JS:
VAMOS PRATICAR.
● gulp.src
Indicamos em qual diretório e em quais arquivos queremos realizar alguma tarefa.
● gulp.dest
Indicamos para qual diretório queremos enviar os arquivos que foram modificados por alguma tarefa.
Comandos básicos:
● gulp.task
Realizamos a criação das tarefas.
● pipe()
Responsável por indicar qual o módulo deverá ser executado, para a realização de uma determinada tarefa.
Comandos básicos:
Alguns módulos que podemos utilizar:
Minificar arquivos .JS utilizando o UglifyJS.
npm install --save-dev gulp-uglify
https://www.npmjs.com/package/gulp-uglify/
Gulp-Uglify
Concatenar arquivos.
npm install --save-dev gulp-concat
https://www.npmjs.com/package/gulp-concat/
Gulp-Concat
Plugin para a utlização do JS Hint.
npm install --save-dev gulp-jshint
https://www.npmjs.com/package/gulp-jshint/
Gulp-Jshint
Reduzir o tamanho das imagens PNG,JPG, GIF e SVG.
npm install --save-dev gulp-imagemin
https://www.npmjs.com/package/gulp-imagemin/
Gulp-Imagemin
Minificar arquivos .CSS.
npm install --save-dev gulp-cssmin
https://www.npmjs.com/package/gulp-cssmin
Gulp-Cssmin
Minificar arquivos .HTML.
npm install --save-dev gulp-htmlmin
https://www.npmjs.com/package/gulp-htmlmin/
Gulp-Htmlmin
Mais métodos:
Compilar arquivos .LESS.
npm install --save-dev gulp-less
https://www.npmjs.com/package/gulp-less/
Gulp-Less
Compilar arquivos .SASS.
npm install --save-dev gulp-sass
https://www.npmjs.com/package/gulp-sass/
Gulp-Sass
Compilar arquivos .STYL.
npm install --save-dev gulp-stylus
https://www.npmjs.com/package/gulp-stylus/
Gulp-Stylus
Visualizar as modificações rapidamente no browser.
**Necessita da extensão do livereload.
npm install --save-dev gulp-livereload
https://www.npmjs.com/package/gulp-livereload/
Gulp-Livereload
Realizar o deploy para o seu servidor.
**Necessita que o rsync esteja instalado em seu computador.***Para Windows - https://www.cygwin.com/
npm install --save-dev gulp-rsync
https://www.npmjs.com/package/gulp-rsync/
Gulp-Rsync
Obter um report da nossa página segundo as métricas do PageSpeed Insights.
npm install --save-dev psi
https://www.npmjs.com/package/psi
Psi
Obter um report da nossa página quanto ao nível de acessibilidade que ela possui, através das recomendações do WCAG(Web Content Accessibility Guidelines).
npm install --save-dev gulp-accessibility
https://www.npmjs.com/package/gulp-accessibility/
Gulp-Accessibility
Acompanhar as alterações realizadas em seus arquivos.
npm install --save-dev gulp-watch
https://www.npmjs.com/package/gulp-watch/
Gulp-Watch
● Qualidade.
● Organização.
● Performance(Diminuímos a quantidade dos arquivos a serem baixados pelo browser).
● Tempo.
Os benefícios:
● http://gulpjs.com/
● http://gulpjs.com/plugins/
● https://www.npmjs.com/
● http://perf-tooling.today/
Links úteis:
● https://gist.github.com/YanMagale/f897e1101a1fc60743db
● https://github.com/YanMagale/gulp_stardart
Links úteis:
OBRIGADO!
Github:https://github.com/yanmagale
Twitter:https://twitter.com/yaanmagale