os camaradas grunt e bower
TRANSCRIPT
![Page 1: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/1.jpg)
Os camaradas
Grunt e Bower
@raphaelfabeni
![Page 2: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/2.jpg)
automatizador
de tarefas task runner
gerenciador
de dependências package manager
![Page 3: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/3.jpg)
Grunt
![Page 4: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/4.jpg)
Evitar trabalho repetitivo
![Page 5: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/5.jpg)
Melhorar produtividade
![Page 6: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/6.jpg)
nodeJS & npm
![Page 7: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/7.jpg)
npm install –g grunt-cli
Começando...
![Page 8: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/8.jpg)
package.json
{
"name": "nomedoprojeto",
"version": "1.0.0",
"title": "Título do projeto",
"homepage": "URL do projeto",
"devDependencies": {
"grunt": "~0.4.5"
}
}
![Page 9: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/9.jpg)
Gruntfile.js
"use strict";
module.exports = function( grunt ) {
grunt.initConfig({
// Grunt tasks
});
};
![Page 10: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/10.jpg)
npm install pacoteira
Instalando
![Page 11: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/11.jpg)
npm install grunt-contrib-sass
Instalando
![Page 12: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/12.jpg)
Instalando
npm install grunt-contrib-sass —save-dev
salva a pacoteira como
dependência do projeto
![Page 13: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/13.jpg)
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"
}
}
![Page 14: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/14.jpg)
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'
}
},
}
});
};
...
![Page 15: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/15.jpg)
Configuração Gruntfile.js
// Load plugins
grunt.loadNpmTasks('grunt-contrib-sass');
// Register task
// CSS
grunt.registerTask( 'css', [ 'sass' ] );
![Page 16: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/16.jpg)
Aí o fulano clona o projeto
![Page 17: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/17.jpg)
![Page 18: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/18.jpg)
![Page 19: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/19.jpg)
Só isso?
NÃO!
![Page 20: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/20.jpg)
Homepage Interna
scripts.js
slideshow.js
news.js
scripts.js
news.js
social.js
3 requisições 3 requisições
![Page 21: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/21.jpg)
Homepage Interna
scripts.js
slideshow.js
news.js
scripts.js
news.js
social.js
plugin.js
frufru.js
3 requisições 5 requisições
![Page 22: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/22.jpg)
Homepage Interna
scripts.js
slideshow.js
news.js
scripts.js
news.js
social.js
plugin.js
frufru.js
3 requisições 5 requisições
![Page 23: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/23.jpg)
concatenação + minificação
![Page 24: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/24.jpg)
Homepage Interna
home.min.js interna.min.js
1 requisição 1 requisição
![Page 25: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/25.jpg)
Homepage Interna
home.min.js interna.min.js
1 requisição 1 requisição
![Page 26: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/26.jpg)
![Page 27: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/27.jpg)
Bower
![Page 28: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/28.jpg)
npm install –g bower
Começando...
![Page 29: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/29.jpg)
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"
}
}
![Page 30: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/30.jpg)
![Page 31: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/31.jpg)
{
"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
![Page 32: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/32.jpg)
bower search bagaca
Procurando as bagaças...
![Page 33: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/33.jpg)
Instalando as bagaças...
bower install bagaca --save-dev
salva a bagaça como
dependência do projeto
![Page 34: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/34.jpg)
![Page 35: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/35.jpg)
{
"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
![Page 36: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/36.jpg)
Pasta criada automaticamente
bower_components
└── modernizr
dependência do projeto
![Page 37: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/37.jpg)
Pasta criada automaticamente
bower_components
└── modernizr
dependência do projeto
.bowerrc {
"directory":"components"
}
altera nome da pasta
![Page 38: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/38.jpg)
bower install
Instalando as dependências...
Instala as dependências que estão no bower.json
![Page 39: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/39.jpg)
Simples...
porém detalhes que pode
causar problemas
![Page 40: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/40.jpg)
bower install bagaca
![Page 41: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/41.jpg)
bower install bagaca
grunt js concatenação/minificação
de arquivos JS
bower_components/bagaca/bagaca.js
assets/js/scripts.js
![Page 42: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/42.jpg)
bower install bagaca
grunt js concatenação/minificação
de arquivos JS
bower_components/bagaca/bagaca.js
assets/js/scripts.js
![Page 43: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/43.jpg)
bower install bagaca
grunt js concatenação/minificação
de arquivos JS
grunt js
bower_components/bagaca/bagaca.js
assets/js/scripts.js
![Page 44: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/44.jpg)
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
![Page 45: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/45.jpg)
Tem a dependência
bagaca instalada?
Sim
Tem a dependência
bagaca instalada?
Não
![Page 46: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/46.jpg)
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.
![Page 47: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/47.jpg)
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.
![Page 48: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/48.jpg)
.gitignore no node_modules
jamais
nunca
never
jamé
comite essa pasta }
![Page 49: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/49.jpg)
Não esqueça o --save-dev
![Page 50: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/50.jpg)
.gitignore no bower_components
> Não comite, nem publique essa pasta
> Utilize o Grunt para concatenar/minificar
> Dependências serão instaladas
![Page 51: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/51.jpg)
http://github.com/a2comunicacao/a2boilerplate
![Page 52: Os camaradas Grunt e Bower](https://reader035.vdocuments.mx/reader035/viewer/2022062710/55a4ec541a28ab172b8b458f/html5/thumbnails/52.jpg)
\o/