Hoje vou replicar aqui um post que publiquei no blog da HE:labs.

O Bower (bower.io), criado pelo galerê do Twitter, é um “gerenciador de pacotes para web”, mas especificamente para pacotes de Front-end.

A ideia por trás dele é bem simples: você lista as dependências de JS (jQuery, jQuery Highlight, Backbone e etc.) em um arquivo bower.json que fica dentro do seu projeto, e controla a instalação/atualização desses pacotes por linha de comando.

Intalando o Bower

Antes de tudo, você vai precisar do NPM instalados na sua máquina.

Agora é só usar o NPM para instalar o Bower globalmente no seu sistema:

Instalando pacotes com o Bower

Agora você pode instalar pacotes de três formas diferentes:

Onde <package> pode ser um dos seguintes itens:

• O nome de um pacote registrado no Bower, por exemplo jquery
• Um repositório Git remoto, por exemplo git://github.com/someone/some-package.git (público ou privado)
• Um repositório Git local, por exemplo /var/www/jquery.git/
• Um atalho para um repositório no GitHub, por exemplo someone/some-package
• A URL de um arquivo zip ou tar.gz

Todos os pacotes serão instalados numa pasta bower_components dentro do seu projeto. E a ideia é que você nunca altere o conteúdo dessa pasta, nem dos pacotes dentro dela. Por isso, uma boa é colocá-la no seu .gitignore.

Definindo as dependências do seu projeto no bower.json

O conteúdo do arquivo do seu bower.json descreve o seu projeto e suas dependências num projeto onde usamos o jQuery e o Angular.js. Ele seria mais ou menos assim:

Após rodar o comando de instalação:

Veríamos o seguinte output:

E com isso acabamos de instalar o Angular.js (1.0.7) e o jQuery (2.0.2) no nosso projeto!

Se amanhã sair outra versão do jQuery, podemos atualizá-lo com:

E o jQuery será atualizado, mas o Angular permancerá na versão 1.0.7, pois foi assim que definimos no nosso bower.json.

Incluindo assets instalados com o Bower

Claro que esse passo é opcional se você estiver incluindo assets de outra forma (Sprockets?). Mas vou deixar aqui um pequeno exemplo para não ficarem dúvidas.

Para incluir os arquivos de um projeto, não existe magia negra, é só usar o caminho completo:

Conclusão

Acredito que o Bower tenha bastante futuro, pois estamos cada vez mais tirando as dependências de dentro dos nossos projetos e repositórios, deixando apenas o que é realmente único e importante para a aplicação.

Até a próxima!