Provavelmente se você trabalha com desenvolvimento já deve ter ouvido falar em Grunt e Bower. Mas você sabe qual a função de cada um? Pra que servem? Nessa rápida talk iremos abordar os conceitos e diferenças entre ambos, além de dicas de uso para que você e seu time não caiam em pegadinhas que podem atrapalhar o desenvolvimento.

1. Os camaradas
Grunt e Bower
@raphaelfabeni

2. automatizador
de tarefas
task runner
gerenciador
de dependências
package manager

3. Grunt

4. Evitar trabalho repetitivo

5. Melhorar produtividade

6. nodeJS & npm

7. npm install –g grunt-cli
Começando...

8. package.json
{
"name": "nomedoprojeto",
"version": "1.0.0",
"title": "Título do projeto",
"homepage": "URL do projeto",
"devDependencies": {
"grunt": "~0.4.5"
}
}

9. Gruntfile.js
"use strict";
module.exports = function( grunt ) {
grunt.initConfig({
// Grunt tasks
});
};

10. npm install pacoteira
Instalando

11. npm install grunt-contrib-sass
Instalando

12. Instalando
npm install grunt-contrib-sass —save-dev
salva a pacoteira como
dependência do projeto

13. 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"
}
}

14. 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'
}
},
}
});
};
...

15. Configuração Gruntfile.js
// Load plugins
grunt.loadNpmTasks('grunt-contrib-sass');
// Register task
// CSS
grunt.registerTask( 'css', [ 'sass' ] );

16. Aí o fulano clona o projeto

19. Só isso?
NÃO!

20. Homepage Interna
scripts.js
slideshow.js
news.js
scripts.js
news.js
social.js
3 requisições 3 requisições

21. Homepage Interna
scripts.js
slideshow.js
news.js
scripts.js
news.js
social.js
plugin.js
frufru.js
3 requisições 5 requisições

22. Homepage Interna
scripts.js
slideshow.js
news.js
scripts.js
news.js
social.js
plugin.js
frufru.js
3 requisições 5 requisições

23. concatenação + minificação

24. Homepage Interna
home.min.js interna.min.js
1 requisição 1 requisição

25. Homepage Interna
home.min.js interna.min.js
1 requisição 1 requisição

27. Bower

28. npm install –g bower
Começando...

29. 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"
}
}

31. {
"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

32. bower search bagaca
Procurando as bagaças...

33. Instalando as bagaças...
bower install bagaca --save-dev
salva a bagaça como
dependência do projeto

35. {
"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

36. Pasta criada automaticamente
bower_components
└── modernizr
dependência do projeto

37. Pasta criada automaticamente
bower_components
└── modernizr
dependência do projeto
.bowerrc
{
"directory":"components"
}
altera nome da pasta

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

39. Simples...
porém detalhes que pode
causar problemas

40. bower install bagaca

41. bower install bagaca
grunt js concatenação/minificação
de arquivos JS
bower_components/bagaca/bagaca.js
assets/js/scripts.js

42. bower install bagaca
grunt js concatenação/minificação
de arquivos JS
bower_components/bagaca/bagaca.js
assets/js/scripts.js

43. bower install bagaca
grunt js concatenação/minificação
de arquivos JS
grunt js
bower_components/bagaca/bagaca.js
assets/js/scripts.js

44. 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

45. Tem a dependência
bagaca instalada?
Sim
Tem a dependência
bagaca instalada?
Não

46. 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.

47. 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.

48. .gitignore no node_modules
jamais
nunca
never
jamé
comite essa pasta
}

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

50. .gitignore no bower_components
> Não comite, nem publique essa pasta
> Utilize o Grunt para concatenar/minificar
> Dependências serão instaladas

51. http://github.com/a2comunicacao/a2boilerplate

52. o/