Post on 14-Jul-2015
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/