Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Automatizando tarefas com Gulp.js
João Gabriel Lima
@jgabriel_lima
linkedin.com/in/joaogabriellima
linkedin.com/in/joaogabriellima
IT Hacker, Docente, Instrutor em
treinamentos, Co-fundador da Huddle3, Senior
AI Engineer ...
http://gulpjs.com/
Para que serve e por que eu devo utilizar?
Automatizadores de tarefa são ferramentas que ajudam
programadores a realizarem tarefas repetitivas e
essenciais para o de...
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 ma...
Vamos falar de pré-processadores
Alguns exemplos de pré-processadores
Markdown
HAML
Slim
Jade
CoffeeKup
Sass
Less
Stylus
Compass
CoffeeScript
LiveScript
Ty...
Alguns exemplos
http://dillinger.io/
Iniciando os trabalhos
Pré-requisitos
nodejs.org
npm install -g gulp
gulp -v
LET’S CODE
Exemplo 1:
Realizando testes no javascript
/exemplo1
- index.html
- script.js
- style.css
npm init
npm install gulp --save-dev
npm install gulp-jshint --save-dev
Exemplo 2:
Minificando Html, CSS, JS
var minifyHTML = require('gulp-minify-html');
gulp.task('minify-html', function() {
var opts = {
conditionals: true,
spare...
● empty - remove atributos vazios
● comments - remove comentários
● conditionals - remove comentários condicionais para In...
Exemplo 3:
Otimizando Imagens
https://www.npmjs.com/package/gulp-imagemin
Exemplo 4:
Browser Sync e Watch Task
https://www.npmjs.com/package/gulp-deploy-ftp
Você não precisa fazer tudo DO ZERO...
https://html5boilerplate.com/
https://github.com/tomaszbujnowicz/html5-boilerplate-gulp-less
Explore mais plugins...
http://gulpjs.com/plugins/
Obrigado!
https://github.com/jgabriellima/aula-gulpjs-iesam
Automatizando tarefas com Gulp.js
João Gabriel Lima
@jgabriel_lima
linkedin.com/in/joaogabriellima
[Estácio - IESAM] Automatizando Tarefas com Gulp.js
[Estácio - IESAM] Automatizando Tarefas com Gulp.js
[Estácio - IESAM] Automatizando Tarefas com Gulp.js
[Estácio - IESAM] Automatizando Tarefas com Gulp.js
Prochain SlideShare
Chargement dans…5
×

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

605 vues

Publié le

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)

Publié dans : Technologie
  • Soyez le premier à commenter

[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

×