Cya grunt.js, hello gulp.js

472 visualizações

Publicada em

Palestra apresentada no THT - Things Hacker Team.
Foi apresentado as facilidades de utilização do GULP e também as diferenças entre o GRUNT e o Gulp.

Também foi demostrado como criar algumas tarefas inicias utilizando o GULP.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
472
No SlideShare
0
A partir de incorporações
0
Número de incorporações
14
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Cya grunt.js, hello gulp.js

  1. 1. CyaGrunt.js,helloGulp.js
  2. 2. Quemosoueu? ● Apenas um analista desenvolvedor PHP ● Trabalho no Pravaler
  3. 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. 4. NODEJS? ● Mas o NODE não é novo ? ● Será que vale a pena utilizar ? ● Quais empresas utilizam ?
  5. 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. 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. 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. 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. 9. Legalvamosfazeralgumacoisa? ● Bom para iniciar podemos criar uma estrutura básica, como por exemplo: |palestra/ |--dist/ |--src/ |--js |--source.js |--Gulpfile.js
  10. 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. 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. 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. 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. 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. 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. 16. Corpodatarefapalestra-scripts ● A nossa tarefa ficará da seguinte forma: ● E para executar nossa tarefa utilize o comando: ○ $ gulp palestra-scripts
  17. 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. 18. Dúvidas?
  19. 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!

×