Cya grunt.js, hello gulp.js
-
Upload
michael-douglas -
Category
Technology
-
view
449 -
download
0
Transcript of Cya grunt.js, hello gulp.js
![Page 1: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/1.jpg)
Cya Grunt.js, hello Gulp.js
![Page 2: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/2.jpg)
Quemo sou eu ?
● Apenas um analista desenvolvedor PHP● Trabalho no Pravaler
![Page 3: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/3.jpg)
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 ?
![Page 4: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/4.jpg)
NODE JS ?● Mas o NODE não é novo ?● Será que vale a pena utilizar ?● Quais empresas utilizam ?
![Page 5: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/5.jpg)
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.
![Page 6: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/6.jpg)
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
![Page 7: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/7.jpg)
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/
![Page 8: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/8.jpg)
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
![Page 9: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/9.jpg)
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
![Page 10: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/10.jpg)
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.
![Page 11: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/11.jpg)
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.
![Page 12: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/12.jpg)
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.
![Page 13: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/13.jpg)
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
![Page 14: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/14.jpg)
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
![Page 15: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/15.jpg)
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
![Page 16: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/16.jpg)
Corpo da tarefa palestra-scripts● A nossa tarefa ficará da seguinte forma:
● E para executar nossa tarefa utilize o comando:○ $ gulp palestra-scripts
![Page 17: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/17.jpg)
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
![Page 18: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/18.jpg)
Dúvidas ?
![Page 19: Cya grunt.js, hello gulp.js](https://reader031.fdocuments.net/reader031/viewer/2022020410/58a48e281a28ab58738b704b/html5/thumbnails/19.jpg)
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: [email protected]
Obrigado galera!