Cya Grunt.js, hello Gulp.js

Quemo sou eu ?

● Apenas um analista desenvolvedor PHP● Trabalho no Pravaler

Primeiramente o que é 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 ?

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

Qual benefício um automatizador de tarefas pode trazer ?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.

Por que devo utilizar o GULP e não o Grunt ?● 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

Instalação do GULP● 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/

Instalação do GULP● 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

Legal vamos fazer alguma coisa ?● Bom para iniciar podemos criar uma estrutura básica, como

por exemplo:

|palestra/|--dist/|--src/

|--js|--source.js|--Gulpfile.js

Legal vamos fazer alguma coisa ?● 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.

Instalando os plugins● 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.

Instalando os plugins● 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.

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

Primeira tarefa GULP● 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

Corpo da tarefa GULP● 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

Corpo da tarefa palestra-scripts● A nossa tarefa ficará da seguinte forma:

● E para executar nossa tarefa utilize o comando:○ $ gulp palestra-scripts

Configurar uma tarefa de monitoramento - 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

Dúvidas ?

Contatos MDBA➢ 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!