O que há de tão bom no Bower?

O seguinte é um post convidado por Dan Sundy do Helios Design Labs. Dan vai explicar como usar Bower e fazer um caso para isso, da perspectiva de alguém que resistiu à idéia no início.

Quando eu comecei a trabalhar com Bower, eu não consegui o apelo. “A sério?” Eu pensei. “Agora é demasiado trabalho para descarregar e descomprimir um ficheiro?” Eu também não estava super entusiasmado em enfiar um monte de novos comandos num cérebro que já estava inchado com Git, Grunt, Gulp, Jekyll, Node, etc.

Há duas coisas que eu diria aquela versão de há meio ano atrás de mim. Primeiro, o Bower pode fazer um pouco mais do que baixar um ou dois arquivos. Segundo, passar uma hora aprendendo uma ferramenta que irá eliminar uma tarefa repetitiva vale a pena.

Primeiras Coisas Primeiro: What the Heck is Bower?

Para os não iniciados, o Bower é um gerenciador de pacotes. É bom em, bem, gerenciar pacotes – qualquer coisa que você dependa de um autor externo para isso. Bons exemplos são frameworks CSS como Bootstrap, bibliotecas como jQuery, jQuery plugins, ou frameworks JavaScript como Angular. O site oficial do Bower, Bower.io, provavelmente diz o melhor:

Web sites são feitos de muitas coisas – frameworks, bibliotecas, ativos, utilitários e arco-íris. Bower gerencia todas essas coisas para você.

Bower funciona pegando e instalando pacotes de todos os lugares, cuidando de caçar, encontrar, baixar e salvar as coisas que você está procurando.

Pré-requisitos

Existem algumas coisas que você vai precisar antes de começar a trabalhar com Bower:

• A linha de comando. Sim, é uma ferramenta de linha de comando (c’mon não é assim tão assustadora).
• Nó e NPM. Bower é um módulo de Nó, então para obtê-lo você precisa de NPM.
• Git. Os pacotes Bower são reposit Git. Bower usa Git para entender onde o pacote está, que versão está nesse tipo de coisa.
• Instalação Global. Tecnicamente você poderia instalá-lo em todos os projetos, mas você provavelmente vai querer tê-lo em qualquer lugar.

Para instalar o Bower globalmente:

$ npm install -g bower

Nota: Dependendo da sua configuração você pode ter que usar `sudo npm install -g bower` para instalá-lo globalmente.

O básico

Para começar, imagine a estrutura de diretórios para um novo site. O meu normalmente se parece com isto:

|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md

Existe uma pasta `src` onde a maior parte do trabalho de desenvolvimento é feita. Uma tarefa de compilação Gulp irá eventualmente preparar tudo e compilar nosso código otimizado em uma pasta `dist` pronta para produção.

Vamos dizer que você quer incluir o jQuery neste projeto. Normalmente você iria ao jquery.com, encontraria e clicaria no link de download correto, depois descompactaria e colocaria os arquivos no diretório correto.

Com Bower, basta executar o seguinte comando:

$ bower install jquery

Agora um diretório `bower_components` com uma pasta `jquery` apareceu.

|-.git/|-bower_components/| |-jquery/||-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md

jQuery facilitou a obtenção do código deles, criando e registrando um pacote para Bower. A maioria das bibliotecas e frameworks populares tem feito o mesmo. Se você quiser verificar se o ativo que você quer é um pacote Bower você pode fazer uma busca:

$ bower search <package-name>

Se não estiver registrado, ainda é possível pegar repos com pontos finais do git como este:

$ bower install git://github.com/example-user/example-package.git

Avançado: Se você quiser ficar extravagante, você pode até mesmo instalar repos privados aos quais você tem acesso. Confira este vídeo tutorial por Rob Dodson.

Aqui estão alguns outros comandos básicos que você pode usar para ver e gerenciar os recursos que você tem instalados.

Liste todos os seus pacotes:

$ bower list

Receba informações sobre qualquer pacote que você tenha instalado:

$ bower info <package-name>

Cheque por atualizações com:

$ bower check-new

Então, se houver atualizações, atualize um pacote:

$ bower update <package-name>

Mas talvez a atualização para a última versão tenha quebrado alguma coisa.

Instalar qualquer versão específica, antiga ou nova, com:

$ bower install <package-name>#<version>

Esta não é definitivamente uma lista exaustiva. Se você estiver interessado em começar, recomendo que você faça um projeto de teste e trabalhe através de um dos muitos tutoriais que podem ser encontrados online. Este por Treehouse é ótimo: Começando com o Bower. Então você pode pesquisar todos os comandos checando a API do Bower.

Ei, mas espere, tem mais!

A pequena equipe de desenvolvimento com quem eu trabalho tem usado o Bower no último ano ou mais. Enquanto o gerenciamento de pacotes via linha de comando era ótimo, eu não fui vendido até que começamos a utilizar os arquivos `bower.json` e `.bowerrc`.

.bowerrc

O arquivo `.bowerrc` pode fazer uma série de coisas, mas eu já o vi na maioria das vezes utilizado para mudar o nome e a localização do diretório `bower_components`. (Isso me deixou feliz porque eu odiava ter aquela pasta aleatória `bower_components` flutuando na raiz do projeto).

Aqui está como um arquivo `.bowerrc` pode se parecer:

{ "directory": "src/components"}

A opção de diretório envia pacotes para um local que faz mais sentido – neste caso, o diretório `src/`. Dê uma olhada na nova estrutura do projeto:

|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-components/| | |-jquery/| || |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-.bowerrc|-gulpfile.js|-package.json|-README.md

Note que a pasta `bower_components/` desapareceu e há uma pasta `components/` no diretório `src/`.

Avançado: É uma boa idéia usar algo como gulp-usemin ou grunt-usemin para cuidar da concatenação e minificação de todos os estilos e scripts extras.

Então como o arquivo `bower.json` pode nos ajudar?

bower.json

O arquivo `bower.json` se parece muito com o `package.json` do Node. É um ficheiro manifesto que lhe permite especificar opções. Vamos dar uma olhada em um exemplo (que pode ser gerado executando bower init):

{ "name": "bower-example", "version": "0.0.0", "authors": >" ], "description": "An example project using bower.", "main": "index.html", "license": "MIT", "private": true, "ignore": , "devDependencies": { "jquery": "~2.1.1" }}

Muitas destas opções estão lá no caso de você estar registrando este repo como um pacote Bower. Mas veja o objeto devDependencies no fundo? Esse objeto será atualizado automaticamente se você anexar --save-dev a um comando Bower, como este:

$ bower install jquery --save-dev

Agora se o colega codificador executar `bower install`, o computador irá instalar tudo da lista devDependencies na pasta especificada em `.bowerrc`. Similarmente, se um desenvolvedor adicionar um pacote ou atualizar uma versão de pacote utilizando --save-dev, toda a equipe pode sincronizar seus ativos utilizando bower install (após puxar para baixo a última versão do arquivo `bower.json`).

Desde que todo o trabalho de caça e coleta tenha sido eliminado com o arquivo `bower.json`, não há mais necessidade de versão de nenhum desses ativos. A pasta `components/` pode ser adicionada ao arquivo `.gitignore` para manter o seu repositório magro e médio.

*.DS_Store.sass-cachenode_modules/dist/src/components/

Parting Shot

Eu estava ouvindo um episódio do meu podcast favorito do web dev (wink, wink) e os hosts estavam conversando sobre se o Bower era realmente útil, ou apenas uma moda passageira. Eles estavam se perguntando se seu objetivo é facilitar o download ou se ele é usado para atualizar versões de suas bibliotecas, como os ruby gems fazem. Eles falavam sobre ser um “front-endy NPM” (eu estou parafraseando).

A beleza é que ele faz todas essas coisas. Você pode usá-lo para baixar e manter o código atualizado, mas você pode levá-lo adiante. Bower pode ajudá-lo a manter as bibliotecas e frameworks do projeto em sincronia, ou integrá-lo com outras ferramentas como Yeoman para aparar ainda mais tempo fora da configuração do seu dev. Além disso, você pode criar e registrar seus próprios pacotes Bower para que você possa instalá-los e atualizá-los em todos os seus projetos rapidamente (e com segurança).

Oh, e em relação à questão que iniciou a discussão: Você não utilizaria o Bower para instalar o WordPress, e o WordPress não deve estar na sua pasta `bower_components’. Mas você poderia usar o Bower dentro do seu tema WordPress para gerenciar ativos externos (apenas não carregue bibliotecas como jQuery que já estão incluídas no núcleo do WordPress).