Bower

O Bower, é um gerenciador de pacotes front-end.

A ideia nele é bem simples. Em um arquivo bower.json que provavelmente estará na pasta raiz do seu projeto, você lista as dependências (AngularJS, Bootstrap, Ionic, jQuery e etc.) e este arquivo é responsável por controlar a instalação/atualização desses pacotes com um simples comando.

Table of Contents

  1. Como instalar o Bower
  2. O arquivo Bower.json
  3. Incluindo os pacotes no seu projeto
  4. Para finalizar

Como instalar o Bower

Para instalar o bower, você precisa do Node.js e do NPM instalados no seu computador.
Depois que você instalar, você poderá usar o seguinte comando para instalar o bower de forma global no seu computador

1
npm install -g bower

Isso significa que você poderá executá-lo em qualquer pasta do seu sistema.

##Instalando pacotes com o Bower
Agora você pode instalar pacotes de três formas diferentes:

  • Instalação das dependências listadas no bower.json

    • bower install
  • Instalar um pacote específico

    • bower install <package>
  • Instalar uma versão Git do pacote

    • bower install <package>#<version>
    • <package> é o nome do pacote ou repositório do git.

Todos os pacotes serão instalados numa pasta bower_components dentro do seu projeto. O ideal é que você nunca altere o conteúdo de nenhum dos pacotes desta pasta. E é recomendado adiciona-la ao arquivo .gitignore, quando se está usando algum repositório git no projeto(Se você não estiver usando, este arquivo provavelmente não existirá para você).

Se você não sabe a função deste arquivo, é sinal que ainda precisa aprender mais um pouquinho sobre o git. Não se preocupe não é nada demais. Resumidamente a função dele controlar pastas e arquivos que devem ser ignorados ao enviar seu código para o git.

Pergunta: Mas como eu posso deixar minhas dependências fora do meu projeto? Sem elas não vai funcionar!

Resposta: Veja que eu disse para adicionar apenas a pasta bower_components para o .gitignore, mas você ainda tem o arquivo bower.json, que é suficiente para instalar todas as dependências necessárias com o simples comando visto acima! Ou seja, clonou o repositório, executa o bower install e pronto. Dependências baixadas.
Definindo as dependências do seu projeto no bower.json

O arquivo Bower.json

O arquivo bower.json descreve o seu projeto e dependências. No exemplo abaixo, usei o jQuery e o Angular.js.

1
2
3
4
5
6
7
8
{
"name": "meu-projeto",
"version": "1.0.0",
"dependencies": {
"jquery": "master",
"angular": "1.4.3"
}
}

Se você executar o comando de instalação visto acima para este arquivo bower.json

1
bower install

Teríamos uma saída parecida com:

Bower

E assim já conseguimos instalar o AngularJS 1.4.3 e o jQuery mais atual no projeto! Fácil não é?

Se em algum tempo sair uma nova versão do jQuery, basta atualizar:

1
bower update

Fazendo isso, nosso jQuery estará atualizado. Mas o AngularJS não. Por que?

Vamos rever nosso bower.json:

1
2
3
4
5
6
7
8
{
"name": "meu-projeto",
"version": "1.0.0",
"dependencies": {
"jquery": "master",
"angular": "1.4.3"
}
}

Repare que para o jQuery, definimos “master”. O que significa dizer que será sempre o mais atual. Já para o AngularJS, definimos exatamente uma versão, neste caso a 1.4.3. Então o bower irá sempre manter esta versão.

Incluindo os pacotes no seu projeto

O jeito mais simples de incluir as dependências no projeto é fazer referencia ao caminho completo:

1
2
<script src="/bower_components/jquery/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>

Nada diferente do normal, a não ser que você use alguma outra forma para isso.

Para finalizar

Segue um link para buscar pacotes disponíveis para o Bower: Bower Search!

Acredito que o Bower facilita bastante o gerenciamento das dependências front-end e ele vai te livrar de ter que carregar esses arquivos para seu repositório git, uma vez que basta clonar o repositório e executar o comando de instalação para ter todos esses recursos prontos para usar!

Se tiverem alguma duvida ou sugestão, não deixem de comentar! Até a próxima!