[Estácio - IESAM] Automatizando Tarefas com Gulp.js
Transferir como PPTX, PDF1 gostou709 visualizações
O documento descreve como automatizar tarefas com a ferramenta Gulp.js. Ele explica que Gulp ajuda a automatizar tarefas repetitivas como concatenar arquivos, minificar e rodar testes. Também fornece exemplos de como usar Gulp para rodar testes JavaScript, minificar HTML, CSS e JavaScript e otimizar imagens. Recomenda pré-processadores e plugins úteis e encoraja a explorar mais funcionalidades de Gulp.
![[Estácio - IESAM] Automatizando Tarefas com Gulp.js](https://image.slidesharecdn.com/estcio-iesamautomatizandotarefascomgulp-151220144313/85/Estacio-IESAM-Automatizando-Tarefas-com-Gulp-js-11-320.jpg)
![[Estácio - IESAM] Automatizando Tarefas com Gulp.js](https://image.slidesharecdn.com/estcio-iesamautomatizandotarefascomgulp-151220144313/85/Estacio-IESAM-Automatizando-Tarefas-com-Gulp-js-12-320.jpg)
![[Estácio - IESAM] Automatizando Tarefas com Gulp.js](https://image.slidesharecdn.com/estcio-iesamautomatizandotarefascomgulp-151220144313/85/Estacio-IESAM-Automatizando-Tarefas-com-Gulp-js-13-320.jpg)
![[Estácio - IESAM] Automatizando Tarefas com Gulp.js](https://image.slidesharecdn.com/estcio-iesamautomatizandotarefascomgulp-151220144313/85/Estacio-IESAM-Automatizando-Tarefas-com-Gulp-js-14-320.jpg)
[Estácio - IESAM] Automatizando Tarefas com Gulp.js
- 1. Automatizando tarefas com Gulp.js João Gabriel Lima @jgabriel_lima linkedin.com/in/joaogabriellima
- 2. linkedin.com/in/joaogabriellima IT Hacker, Docente, Instrutor em treinamentos, Co-fundador da Huddle3, Senior AI Engineer na NexusEdge. Doutorando em Computação Aplicada com ênfase em Inteligência Artificial, Mineração de Dados e BigData.
- 4. Para que serve e por que eu devo utilizar?
- 5. Automatizadores de tarefa são ferramentas que ajudam programadores a realizarem tarefas repetitivas e essenciais para o desenvolvimento como: concatenação de arquivos, minificação, testes...
- 6. Fácil de usar: Ao preferir código ao invés de configuração, Gulp mantém simples o que é simples e faz tarefas complexas mais bem administráveis. Eficiente: Gulp usa o poder de streams do Node, o que permite builds muitos mais rápidos e dispensa a necessidade de gravação de arquivos intermediários em disco. Alta qualidade: As diretrizes estritas para plugins do Gulp garantem que seus plugins permaneçam simples e trabalhem da maneira que se espera. Fácil de aprender: Com uma API mínima, aprende-se a trabalhar com o Gulp quase que na hora!
- 7. Vamos falar de pré-processadores
- 8. Alguns exemplos de pré-processadores Markdown HAML Slim Jade CoffeeKup Sass Less Stylus Compass CoffeeScript LiveScript TypeScript Babel Processing.js
- 16. nodejs.org
- 17. npm install -g gulp gulp -v
- 18. LET’S CODE
- 19. Exemplo 1: Realizando testes no javascript
- 20. /exemplo1 - index.html - script.js - style.css npm init npm install gulp --save-dev npm install gulp-jshint --save-dev
- 21. Exemplo 2: Minificando Html, CSS, JS
- 22. var minifyHTML = require('gulp-minify-html'); gulp.task('minify-html', function() { var opts = { conditionals: true, spare:true }; return gulp.src('./static/html/*.html') .pipe(minifyHTML(opts)) .pipe(gulp.dest('./dist/')); });
- 23. ● empty - remove atributos vazios ● comments - remove comentários ● conditionals - remove comentários condicionais para Internet Explorer ● spare - remove atributos redundantes ● loose - preserva os espaços em branco
- 26. Exemplo 4: Browser Sync e Watch Task
- 28. Você não precisa fazer tudo DO ZERO...
- 33. Automatizando tarefas com Gulp.js João Gabriel Lima @jgabriel_lima linkedin.com/in/joaogabriellima