Trabalhando com Grunt e Bower

Dev Sunny Day

http://bit.ly/gruntbowerdevsunnyday

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/gruntbowerdevsunnyday

Como você usa o jquery hoje?

http://bit.ly/gruntbowertdc

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": "TDC2015",
    "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"
    }
}

Gruntjs

Automatizador de tarefas

Feito em JavaScript e roda no NodeJS

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 grunt

Victor Cavalcante @vcavalcante 

Várias tasks já prontas para usar

Victor Cavalcante @vcavalcante 

• grunt-bower-task

• grunt-contrib-less

• grunt-contrib-uglify

• grunt-autoprefixer

• grunt-contrib-watch

• grunt-contrib-csslint

• grunt-spritesmith

• grunt-contrib-clean

• grunt-contrib-copy

• grunt-contrib-jshint

• grunt-contrib-concat

• grunt-contrib-cssmin

http://www.gruntjs.com/plugins

instalar dependencia pelo npm (package.json)

{
    "version": "1.0.0",
    "name": "DEVSUNNYDAY",
    "private": true,
    "devDependencies": {
        "bower": "~1.4.1",
        "grunt": "~0.4.5",
        "grunt-bower-task": "~0.4.0",
        "grunt-contrib-less": "~1.0.1",
        "less-plugin-autoprefix": "~1.4.2",
        "less-plugin-clean-css": "~1.5.0"
    }
}

instalar dependencia pelo npm 

Command line

npm install grunt-contrib-watch --save-dev

gruntfile.json

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    install: true,
                    targetDir: "wwwroot/lib",
                    cleanTargetDir: true,
                    layout: "byComponent"
                }
            }
        },
    });
    
    grunt.registerTask("default",["bower"])

    grunt.loadNpmTasks("grunt-bower-task");
}

Automatize todo processo repetitivo

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

victor@cavalcante.net