Os camaradas Grunt e Bower

Os camaradas

Grunt e Bower

@raphaelfabeni

automatizador

de tarefas task runner

gerenciador

de dependências package manager

Grunt

Evitar trabalho repetitivo

Melhorar produtividade

nodeJS & npm

npm install –g grunt-cli

Começando...

package.json

{

"name": "nomedoprojeto",

"version": "1.0.0",

"title": "Título do projeto",

"homepage": "URL do projeto",

"devDependencies": {

"grunt": "~0.4.5"

}

}

Gruntfile.js

"use strict";

module.exports = function( grunt ) {

grunt.initConfig({

// Grunt tasks

});

};

npm install pacoteira

Instalando

npm install grunt-contrib-sass

Instalando

Instalando

npm install grunt-contrib-sass —save-dev

salva a pacoteira como

dependência do projeto

package.json modificado

{

"name": "nomedoprojeto",

"version": "1.0.0",

"title": "Título do projeto",

"homepage": "URL do projeto",

"devDependencies": {

"grunt": "~0.4.5",

"grunt-contrib-sass": "~0.7.4"

}

}

Configuração Gruntfile.js

"use strict";

module.exports = function( grunt ) {

grunt.initConfig({

sass: {

// Dev

dev: {

options: {

style: 'compressed',

noCache: true

},

files: {

'build/css/main.min.css':

'assets/scss/main.scss'

}

},

}

});

};

...

Configuração Gruntfile.js

// Load plugins

grunt.loadNpmTasks('grunt-contrib-sass');

// Register task

// CSS

grunt.registerTask( 'css', [ 'sass' ] );

Aí o fulano clona o projeto

Só isso?

NÃO!

Homepage Interna

scripts.js

slideshow.js

news.js

scripts.js

news.js

social.js

3 requisições 3 requisições

Homepage Interna

scripts.js

slideshow.js

news.js

scripts.js

news.js

social.js

plugin.js

frufru.js

3 requisições 5 requisições

Homepage Interna

scripts.js

slideshow.js

news.js

scripts.js

news.js

social.js

plugin.js

frufru.js

3 requisições 5 requisições

concatenação + minificação

Homepage Interna

home.min.js interna.min.js

1 requisição 1 requisição

Homepage Interna

home.min.js interna.min.js

1 requisição 1 requisição

Bower

npm install –g bower

Começando...

Você pode adicionar ao package.json

como dependência

{

"name": "nomedoprojeto",

"version": "1.0.0",

"title": "Título do projeto",

"homepage": "URL do projeto",

"devDependencies": {

"grunt": "~0.4.5",

"bower": "~1.3.9"

}

}

{

"name": "exemplo",

"version": "0.0.1",

"authors": [

"raphaelfabeni"

],

"description": "Simples exemplo usando o Bower",

"license": "MIT",

"homepage": "www.homepage.com.br",

"ignore": [

"**/.*",

"node_modules",

"bower_components",

"test",

"tests"

],

"devDependencies": {

}

}

bower.json

bower search bagaca

Procurando as bagaças...

Instalando as bagaças...

bower install bagaca --save-dev

salva a bagaça como

dependência do projeto

{

"name": "exemplo",

"version": "0.0.1",

"authors": [

"raphaelfabeni"

],

"description": "Simples exemplo usando o Bower",

"license": "MIT",

"homepage": "www.homepage.com.br",

"ignore": [

"**/.*",

"node_modules",

"bower_components",

"test",

"tests"

],

"devDependencies": {

"modernizr": "~2.8.3"

}

}

bower.json atualizado

Pasta criada automaticamente

bower_components

└── modernizr

dependência do projeto

Pasta criada automaticamente

bower_components

└── modernizr

dependência do projeto

.bowerrc {

"directory":"components"

}

altera nome da pasta

bower install

Instalando as dependências...

Instala as dependências que estão no bower.json

Simples...

porém detalhes que pode

causar problemas

bower install bagaca

bower install bagaca

grunt js concatenação/minificação

de arquivos JS

bower_components/bagaca/bagaca.js

assets/js/scripts.js

bower install bagaca

grunt js concatenação/minificação

de arquivos JS

bower_components/bagaca/bagaca.js

assets/js/scripts.js

bower install bagaca

grunt js concatenação/minificação

de arquivos JS

grunt js

bower_components/bagaca/bagaca.js

assets/js/scripts.js

bower install bagaca

grunt js concatenação/minificação

de arquivos JS

grunt js erro!

#todoschora

bower_components/bagaca/bagaca.js

assets/js/scripts.js

Tem a dependência

bagaca instalada?

Sim

Tem a dependência

bagaca instalada?

Não

Tem a dependência

bagaca instalada?

Sim

A tarefa do Grunt encontra

todos os arquivos

necessário.

Tem a dependência

bagaca instalada?

Não

A tarefa do Grunt não

encontra todos os arquivos

necessário.

Tem a dependência

bagaca instalada?

Sim

A tarefa do Grunt encontra

todos os arquivos

necessário.

A lib bagaca não foi adicionada ao bower.json

como dependência.

Tem a dependência

bagaca instalada?

Não

A tarefa do Grunt não

encontra todos os arquivos

necessário.

Ao rodar bower install

nenhuma dependência é

instalada.

.gitignore no node_modules

jamais

nunca

never

jamé

comite essa pasta }

Não esqueça o --save-dev

.gitignore no bower_components

> Não comite, nem publique essa pasta

> Utilize o Grunt para concatenar/minificar

> Dependências serão instaladas

http://github.com/a2comunicacao/a2boilerplate

\o/