O que vamos ver no treinamento? – Por quê precisamos automatizar? – Introdução ao GulpJs

O que vamos ver no treinamento?

• Por quê precisamos automatizar?
• Conceitos da automatização
• Introdução ao Gulp
• Principais Vantagens
• Exemplos e utilização

Por quê precisamos automatizar?

A automatização é um dos resultados da evolução

Conceito

"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 homen. Ela diminui os custos e aumenta a velocidade da produção."

Fonte: GOOGLE :)

Introdução ao GulpJs

• Ferramenta para a automatização de tarefas e aumentar o seu fluxo de trabalho
• Feito em Javascript
• Para seu uso é necessario a instalação do NodeJs

Algumas coisas que podemos fazer com Gulp

• Minificação de arquivos
• Concatenação de arquivos
• Mover arquivos de pastas
• Válidar seu código
• Criar SPRITES automaticamente
• Otimizar imagens para produção
• Verificar a qualidade e complexidade do nosso código
• Live Reload
• Executar testes de performance/unitários
• Deploy

Primeiros passos com o Gulp Js

• Ter o Node Instalado
• Instalação do GulpJs
• Criação do arquivo package.json
• Instalação dos módulos necessarios para seu projeto
• Criação do arquivo gulpfile.js

Alguns módulos que podemos utilizar:

• Gulp-Uglify - Minificar arquivos .js
• Gulp-Concat - Concatenar arquivos
• Gulp-Jshint - Plugin para a utilização do JS Hint
• Gulp-Cssmin - Minificar arquivos .css
• Gulp-Imagemin - Otimiza o peso da imagem (PNG, JPG, SVG...)

Mais plugins em:

Comandos básicos

• Indicamos em qual diretório e em quais arquivos queremos realizar alguma tarefa.

  gulp.src()

• Indicamos para qual diretório queremos enviar os arquivos que foram modificados por alguma tarefa.

  gulp.dest()

• Realizamos a criação das tarefas.

  gulp.task()

• Responsável por indicar qual o módulo deverá ser executado, para a realização de uma determinada tarefa.

  pipe()

Vamos aos códigos