Os camaradas Grunt e Bower

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.

Transcript

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/