Trabalhando com GULP e Bower

Codificando

http://bit.ly/gulpbowercodificando

Victor Cavalcante

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

vcavalcante@lambda3.com.br @vcavalcante

http://bit.ly/gulpbowercodificando

Como você usa o jquery hoje?

http://bit.ly/gulpbowercodificando

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

http://www.gruntjs.com/plugins

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

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

victor@cavalcante.net