Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Os camaradas Grunt e Bower

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.

C4d7da8ef43f08bdbf8cc23fd822c7f9?s=128

Raphael Fabeni

November 14, 2014
Tweet

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

  17. None
  18. None
  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

  26. None
  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" } }
  30. None
  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
  34. None
  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/