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