Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[Estácio - IESAM] Automatizando Tarefas com Gulp.js

593 views

Published on

Tutorial sobre Gulpjs

Especialização em Desenvolvimento Web - Instituto de Estudos Superiores da Amazônia

Neste tutorial apresento a facilidade proporcionada por automatizadores e abordo especificamente o [Gulp.js](gulpjs.com)

Published in: Technology
  • Be the first to comment

[Estácio - IESAM] Automatizando Tarefas com Gulp.js

  1. 1. Automatizando tarefas com Gulp.js João Gabriel Lima @jgabriel_lima linkedin.com/in/joaogabriellima
  2. 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.
  3. 3. http://gulpjs.com/
  4. 4. Para que serve e por que eu devo utilizar?
  5. 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. 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. 7. Vamos falar de pré-processadores
  8. 8. Alguns exemplos de pré-processadores Markdown HAML Slim Jade CoffeeKup Sass Less Stylus Compass CoffeeScript LiveScript TypeScript Babel Processing.js
  9. 9. Alguns exemplos
  10. 10. http://dillinger.io/
  11. 11. Iniciando os trabalhos Pré-requisitos
  12. 12. nodejs.org
  13. 13. npm install -g gulp gulp -v
  14. 14. LET’S CODE
  15. 15. Exemplo 1: Realizando testes no javascript
  16. 16. /exemplo1 - index.html - script.js - style.css npm init npm install gulp --save-dev npm install gulp-jshint --save-dev
  17. 17. Exemplo 2: Minificando Html, CSS, JS
  18. 18. 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/')); });
  19. 19. ● 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
  20. 20. Exemplo 3: Otimizando Imagens
  21. 21. https://www.npmjs.com/package/gulp-imagemin
  22. 22. Exemplo 4: Browser Sync e Watch Task
  23. 23. https://www.npmjs.com/package/gulp-deploy-ftp
  24. 24. Você não precisa fazer tudo DO ZERO...
  25. 25. https://html5boilerplate.com/
  26. 26. https://github.com/tomaszbujnowicz/html5-boilerplate-gulp-less
  27. 27. Explore mais plugins... http://gulpjs.com/plugins/
  28. 28. Obrigado! https://github.com/jgabriellima/aula-gulpjs-iesam
  29. 29. Automatizando tarefas com Gulp.js João Gabriel Lima @jgabriel_lima linkedin.com/in/joaogabriellima

×