O documento discute a ferramenta Gulp.js para automatização de tarefas, explicando o que é Gulp e como instalá-lo e configurá-lo. Também discute a diferença entre Gulp e Grunt e como criar tarefas básicas em Gulp, como minificar arquivos JavaScript.

1. CyaGrunt.js,helloGulp.js

2. Quemosoueu?
● Apenas um analista desenvolvedor PHP
● Trabalho no Pravaler

3. PrimeiramenteoqueéGULP?
● O gulp é uma ferramenta de automação de tarefas feito com
JavaScript e roda em cima do NodeJS.
● Ferramenta de automação de tarefas ? - Perfeito onde está
a água de coco ?

4. NODEJS?
● Mas o NODE não é novo ?
● Será que vale a pena utilizar ?
● Quais empresas utilizam ?

5. Qualbenefícioumautomatizadordetarefaspodetrazer?
Um automatizador de tarefas como o GULP ajuda a nós
programadores preguiçosos, a realizar algumas tarefas
repetitivas de uma forma mais fácil tais como: Minificação
de arquivos JavaScript, CSS e Imagens.

6. PorquedevoutilizaroGULPenãooGrunt?
● Apenas deixar claro que não tenho nada contra GRUNT
● Mas a reposta a essa questão é fácil: O GULP é mais
rápido que o GRUNT, por que utiliza stream do Node JS com
isso dispensa intermediário para processamento.
● Outra questão é que o GULP é muito fácil de trabalhar do
que o GRUNT

7. InstalaçãodoGULP
● Galera como eu comentei o GULP roda no Node então antes
de instalar o GULP confirme se o Node e o NPM estão
instalados, para confirmar execute:
○ $ node -v
○ E o NPM com a instrução: $ npm -v
○ NPM ? - Nada mais é do que um gerenciador de pacotes, segue o link:
■ https://www.npmjs.com/

8. InstalaçãodoGULP
● Agora que sabemos o que é o NPM, então execute o comando:
○ $ npm install -g gulp - (Apenas um curiosidade o -g é para instalar
o gulp globalmente)
○ Para garantir que o GULP está funcionando execute o comando:
■ $ gulp -v

9. Legalvamosfazeralgumacoisa?
● Bom para iniciar podemos criar uma estrutura básica, como
por exemplo:
|palestra/
|--dist/
|--src/
|--js
|--source.js
|--Gulpfile.js

10. Legalvamosfazeralgumacoisa?
● Galera o GULP sozinho não faz muita coisa, por esse
motivo iremos instalar alguns plugins que são:
○ gulp-util, gulp-uglify e gulp-watch
■ gulp-util - Serve como utilitário para o GULP
■ gulp-uglify - Serve para minificar arquivos JS
■ gulp-watch - Serve para o GULP esperar mudanças no arquivo.

11. Instalandoosplugins
● Lembrando que o core de execução é o Node, nós vamos
criar um arquivo que irá gerenciar nossos módulos.
● Para isto, devemos criar na raiz do nosso projeto o
arquivo:
○ package.json
● A forma mais fácil de criar esse arquivo é executar o
comando:
○ $ npm init - Após executar o comando será exibido algumas perguntas
que você pode preencher ou não.

12. Instalandoosplugins
● Para que seja possível automatizar é necessário que você
instale alguns módulos que realizem determinadas tarefas.
● Para instalar um plugin você irá executar o comando npm
install, tal como:
○ $ npm install gulp --save-dev
○ $ npm install gulp-util --save-dev
○ $ npm install gulp-uglify --save-dev
○ $ npm install gulp-watch --save-dev
○ Note que quando executa esse comando seu arquivo de package é
modificado.

13. Package.json
● Como foi comentado todo módulo inserido altera o arquivo
de package.
● Mas por que isso é importante ?
○ Imagine que (alguém) apague sua pasta de módulos (node_modules) ?
○ Com o arquivo package no seu projeto tudo volta a funcionar basta
executar esse comando:
■ $ npm install

14. PrimeiratarefaGULP
● Lembra do arquivo Gulpfile.js ? - é nele que iremos criar
nossas tarefas.
○ Primeiramente nós iremos instanciar os módulos:
Iremos criar uma primeira tarefa responsável por minificar
os arquivos de JavaScript

15. CorpodatarefaGULP
● Antes de mais nada nossa tarefa será composta por esses
passos:
○ Obter os arquivos de JS
○ Minificar os arquivos que obteve
○ E colocar os arquivos na build

16. Corpodatarefapalestra-scripts
● A nossa tarefa ficará da seguinte forma:
● E para executar nossa tarefa utilize o comando:
○ $ gulp palestra-scripts

17. Configurarumatarefademonitoramento-Watch
● Iremos definir mais uma tarefa com o nome:
○ $ palestra-watch
● E o corpo da nossa escuta ficará da seguinte forma:
● E para testar execute: $ gulp palestra-watch

18. Dúvidas?

19. ContatosMDBA
➢ Linkedin - https://br.linkedin.com/in/michaeldouglasbarbosa
➢ Facebook: https://www.facebook.com/mdbaweb
➢ Twitter: https://twitter.com/mdba_php
➢ Github: https://github.com/michaeldouglas
➢ E-mail: michaeldouglas010790@gmail.com
Obrigado galera!