Comece agora mesmo a utilizar o bower em seus projetos Artigo

Conheça os cursos gratuitos do WebDevBr! - Inscreva-se!


Este artigo foi publicado a 1 ano, 5 meses, 6 dias atrás.

Artigo por Frederico Ferreira;

Web sites e sistemas WEB em geral utilizam, na maioria das vezes, alguns frameworks, bibliotecas, utilitários entro outros componentes. E o Bower pode administrar tudo isso para você.

Pense bem, em vez de ter que entrar no site de cada framework que você quer e baixar os arquivos necessários, você pode automatizar este processo e baixar tudo de uma vez através do bower.

Gostou deste artigo?

Receba atualizações semanais com novos artigos do WebDevBr e outras dicas!

O que é o bower?

Bower é um sistema de gerenciamento de pacotes voltado para o front-end. Ele foi inicialmente desenvolvido no Twitter por Jacob Thornton, co-criador do Framework Twitter Bootstrap, que ajudou Bower ganhar rapidamente adoção.

Instalação

Nota:

  • Para instalar o bower é necessário ter instalado as seguintes dependências:
  • NodeJS
  • NPM
  • Git

Execute o seguinte comando em seu terminal:

npm install bower -g

O parâmetro -g, é para que a instalação fique global, podendo ser utilizada em qualquer projeto dentro do seu sistema operacional.


Configurando o projeto

Bem, vamos começar a entender como o bower funciona na pratica, primeiramente temos que inicializar o bower dentro do diretório do nosso projeto, pra isso no terminal executamos o seguinte comando.

bower init

Bem parecido com o comando do git né, após executar o comando o bower ira fazer algumas perguntas, como nome do projeto, descrição, licença entre outras, Para ignorar algumas perguntas basta apertar enter, que o bower seta as opção default para o projeto.

Veja que o bower, criar um arquivo chamado bower.json na raiz do diretório onde o comando foi executado, veja a estrutura do arquivo bower.json após o comando.

{
    name: 'bower',
    authors: [
        'Frederico Ferreira <frederico@ufti.com.br>'
    ],
    description: '',
    main: '',
    license: 'MIT',
    homepage: '',
    ignore: [
        '**/.*',
        'node_modules',
        'bower_components',
        'test',
        'tests'
    ]
}

Até o momento tranquilo né. Então agora vamos começar a baixar alguns dependências para que você possa entender melhor como o bower pode ajudar o nosso projeto.

Instalando as Dependências

Iremos baixar as dependências do nosso projeto, neste exemplo irei baixar o bootswatch que nada mais é do que temas pré-definidos feitos em bootstrap, então irei executar o seguinte comando.

bower install bootswatch --save

A opção --save serve para adicionar o componente no “dependencies” do “bower.json”, após a instalação do pacote, o bower automaticamente cria uma pasta chamada de bower_components onde se encontra todas as dependências que foram baixadas para o projeto, repare que dentro desta pasta temos mais 3 pastas sendo elas:

Bootstrap -> Contém todos os arquivos css e js do bootstrap.

Bootswatch -> Contém varios temas pre-definidos feitos em bootstrap.

Jquery -> Toda a lib do framework jquery.

Veja que o Bower baixou além do bootswatch, que foi o pacote que solicitamos, o bootstrap e o jquery, mas porque isso aconteceu? É porque o Bootswatch depende do bootstrap e o bootstrap depende do jquery para funcionar. O Bower cuida de todas as sub-dependências também, legal né.

Para importar as bibliotecas para o nosso projeto é o mesmo “arroz com feijão”, só adicionar a tag script no html:

<link rel="stylesheet" type="text/css" href="bower_components/bootswatch/cosmo/bootstrap.min.css"/>
<script src="bower_components/jquery/jquery.min.js">
<script src="bower_components/dist/js/bootstrap.min">

Nota:

  • Por padrão, o diretório que o bower utiliza pra salvar os componentes instalados é “bower_components/”, caso você queira modificar, basta criar um arquivo chamado “.bowerrc” com o seguinte conteúdo:
{
    "directory":"nome do diretório que deseja salvar"
}

Agora veja como ficou o nosso arquivo bower.json

{
    "name": "bower",
    "authors": [
        "Frederico Ferreira <frederico@ufti.com.brr>"
    ],
    "description": "",
    "main": "",
    "license": "MIT",
    "homepage": "",
    "ignore": [
        "**/.*",
        "node_modules",
        "bower_components",
        "test",
        "tests"
    ],
    "dependencies": {
        "bootswatch": "^3.3.6+1"
    }
}

Repare que foi adicionado a dependência do Bootswtach, O arquivo bower.json também pode ser modificado manualmente, ou seja você pode adicionar as dependências do projeto manualmente e depois rodar o comando bower install que o bower automaticamente vai ler o bower.json baixar todas as dependências descritas no arquivo. O mesmo comando serve também para quando você baixar algum projeto no github (por exemplo) que utiliza o bower e precisa instalar as dependências para funcionar.

Outros comandos

Para buscar, instalar, atualizar, listar, e desinstalar um novo pacote usamos os comandos abaixo:

`bower search <nome do pacote>`

`bower install <nome do pacote>`

`bower update <nome do pacote>`

`bower list <nome do pacote>`

`bower uninstall <nome do pacote>` 

Dentro do arquivo bower.json ou no terminal quando realizar a instalação de algum pacote, você pode especificar diversos valores de versão, é só colocar um # (asterisco). Por exemplo bower install angular#1.5.5 ou outros parâmetros como:

bower install <Uma tag do Git>

bower install <Um hash de commit do Git>

bower install <Um branch do Git>

bower install <Uma URL>

bower install <Um diretório local>

Dicas

Outra forma de visualizar os componentes registrados no bower de maneira mais agradável é através do site: http://bower.io/search/.

Outra dica é, não versione a pasta que vc estiver utilizando pra salvar os componentes gerenciados pelo bower, se a sua pasta for a padrão (“bower_components/”), coloque no seu .gitignore, assim você deixa seu repositório mais leve e evita conflitos de libs que foram adicionadas por diferentes desenvolvedores.

Bom, este e um simples artigo para que você já possa começar a utilizar o bower em seus projetos e verificar as facilidades que ele propõe pra nós desenvolvedores.Até a próxima pessoal.

Att. Frederico Ferreira,
ufti.com.br


Cursos relacionados


* Parcelamento apenas cartão de crédito! Pode haver uma pequena variação no parcelamento em relação a simulações apresentadas!