Utilizando Bower para gerenciar dependências web em projetos Java

O bower é um gerenciador de pacotes similar ao maven com foco em dependências web, por exemplo em bibliotecas como jquery e bootstrap. Com isso, é possível gerenciar bibliotecas web e até mesmo frameworks JS em projetos Java web utilizando o Bower.

Equivalente ao pom.xml, o bower tem o bower.json, o qual faz a configuração das dependências e suas versões.

bower.json

{
  "name": "projeto",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "^3.1.0",
    "angular": "^1.5.8",
    "bootstrap": "^3.3.7"
  }
}

Por padrão, o bower gera as dependências na pasta bower_components, na mesma pasta do bower.json, no entanto em projetos java web os arquivos js/css devem estar localizados dentro do webapp, assim há duas opções colocar o bower.json dentro da pasta webapp ou definir no arquivo .bowerrc o local e o nome da pasta que o bower deve gerar suas dependências.

.bowerrc

{"directory" : "src/main/webapp/libs/components"}

Particularmente, eu prefiro utilizar a configuração do bowerrc para que o arquivo bower.json fique na raiz do projeto, da mesma forma que o pom.xml.

Após gerado as dependências com o comando bower-install, a utilização das bibliotecas é de acordo com a configuração mencionada acima, como foi definido a geração na pasta “src/main/webapp/libs/components”, a utilização no html será “libs/components/” nome da biblioteca.

html

<!DOCTYPE html>
<html ng-app="pessoaController">
  <head>
    <script src="libs/components/angular/angular.min.js"></script>
    <script src="libs/components/jquery/dist/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="libs/components/bootstrap/dist/css/bootstrap.min.css"/>
  </head>
</html>

Observação: Não é necessário colocar o campinho completo “src/main/webapp/” porque os arquivos web são criados dentro do webapp, em projetos Java web.

Caso o projeto utilize maven, é possível configurar para que o comando bower-install seja executado em conjunto com o install do maven, isso é possível adicionando uma execução no plugin exec-maven-plugin, como demonstrado abaixo.

pom.xml

<plugin>
  <groupId>org.codehaus.mojo</groupId>
  <artifactId>exec-maven-plugin</artifactId>
  <version>1.3.2</version>
  <executions>
    <execution>
      <id>exec-bower-install</id>
      <phase>generate-sources</phase>
      <configuration>
         <executable>bower</executable>
           <arguments>
             <argument>install</argument>
           </arguments>
         </configuration>
       <goals>
         <goal>exec</goal>
       </goals>
     </execution>
  </executions>
</plugin>                    

Seguindo a mesma idéia do maven, onde gera seus arquivos na pasta target, o bower também gera seus arquivos na pasta configurada, dessa forma podemos não enviar esses arquivos para o repositório de código fonte, pois serão baixados a cada install.

.gitignore

     
target
src/main/webapp/libs/components/*    
Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s