Trabalhando com GULP e Bower

Codificando

Victor Cavalcante

  • Desenvolvedor Web Full Stack
  • Palestrante
  • Membro do conselho Jedi da Lambda3
  • Microsoft MVP de ASP.NET

 

 

 

 

 

 

vcavalcante@lambda3.com.br @vcavalcante

Como você usa o jquery hoje?

 

Baixa do site?

 

Nuget?

 

Outro gerenciador de componentes?

Victor Cavalcante @vcavalcante 

Bower

Victor Cavalcante @vcavalcante 

Gerenciador de pacotes para front-end

O que eu vou usar no Bower?

Victor Cavalcante @vcavalcante 

  • jQuery.*
  • angularjs.*
  • underscore
  • backbone
  • etc...

Como funciona?

Victor Cavalcante @vcavalcante 

  • Depende do NodeJS
  • Configurado via bower.json

bower.json

Victor Cavalcante @vcavalcante 

{
    "name": "Codificando",
    "private": true,
    "dependencies": {
        "bootstrap": "3.0.0",
        "jquery": "1.10.2",
        "jquery-validation": "1.11.1",
        "jquery-validation-unobtrusive": "3.2.2",
        "hammer.js": "2.0.4",
        "bootstrap-touch-carousel": "0.8.0"
    }
}

Gulp.js

the Streaming build system

 

Victor Cavalcante @vcavalcante 

Você trabalha com frontend?

Victor Cavalcante @vcavalcante 

Não gosta de fazer Tarefas repetitivas?

Victor Cavalcante @vcavalcante 

Então vai adorar o gulp

Victor Cavalcante @vcavalcante 

Vários plugins que resolvem seus problemas

Victor Cavalcante @vcavalcante 

 

  • gulp-less

  • gulp-uglify

  • gulp-watch

  • gulp-csslint

  • gulp-css-spritesmith

 

  • gulp-jshint

  • gulp-concat

  • gulp-babel

  • gulp-typescript

  • gulp-notify

instalar dependencia pelo npm (package.json)

{
    "version": "1.0.0",
    "name": "Codificando",
    "private": true,
      "devDependencies": {
        "gulp": "3.9.1",
        "gulp-less": "3.0.5",
        "gulp-concat": "2.5.2",
        "gulp-cssmin": "0.1.7",
        "gulp-uglify": "1.2.0",
        "rimraf": "2.2.8",
        "gulp-minify-css": "1.2.4",
        "gulp-autoprefixer": "3.1.0",
        "gulp-watch": "4.3.5"
      }
}

instalar dependencia pelo npm 

Command line

npm install gulp-watch --save-dev

gulpfile.json

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

Automatize todo processo repetitivo

Conheça as ferramentas modernas de desenvolvimento web

Dúvidas, Críticas ou sugestões?
@vcavalcante

victor@cavalcante.net

Made with Slides.com