Usando o Bower com o Symfony¶

O Symfony e todos seus pacotes são perfeitamente gerenciados pelo Composer. O Bower é uma ferramenta de gerenciamento de dependências front-end, como Bootstrap ou jQuery. Como o Symfony é puramente uma estrutura back-end, ele não pode ajudá-lo muito com o Bower. Felizmente, ele é muito fácil de usar!

Instalando o Bower¶

O Bower é construído sobre o Node.js. Certifique-se de que você tenha ele instalado e em seguida, execute:

1	$ npm install -g bower

Após esse comando terminar, execute bower em seu terminal para saber se ele está instalado corretamente.

Tip

Se você não quer instalar o NodeJS no seu computador, você também pode usar o BowerPHP (uma adaptação não oficial PHP do Bower). Tenha em mente que ele ainda está em estado alfa. Se você estiver usando o BowerPHP, use bowerphp ao invés de bower nos exemplos.

Configurando o Bower em seu Projeto¶

Normalmente, o Bower transfere tudo para dentro de um diretório bower_components. No Symfony, apenas os arquivos no diretório web/ são publicamente acessíveis, então, você precisa configurar o Bower para baixar as dependências front-end lá. Para fazer isso, basta criar um arquivo .bowerrc com um novo destino (como web/assets/vendor):

{
    "directory": "web/assets/vendor/"
}

Tip

Se você estiver usando uma ferramenta de automação de tarefas front-end como Gulp or Grunt, então, você pode definir o diretório para o que quiser. Normalmente, você vai usar essas ferramentas para, em última instância, mover todos os assets para o diretório web/.

Um Exemplo: Instalando o Bootstrap¶

Acredite ou não, mas você está agora pronto para usar o Bower em sua aplicação Symfony. Como um exemplo, você vai instalar o Bootstrap em seu projeto e incluí-lo em seu layout.

Instalando a Dependência¶

Para criar um arquivo bower.json, basta executar bower init. Agora você está pronto para começar a adicionar as dependências em seu projeto. Por exemplo, para adicionar o Bootstrap em seu bower.json e baixá-lo, basta executar:

1	$ bower install --save bootstrap

Isso irá instalar o Bootstrap e suas dependências em web/assets/vendor/ (ou qualquer diretório que você configurou no .bowerrc).

Incluindo a Dependência em seu Template¶

Agora que as dependências estão instaladas, você pode incluir o bootstrap em seu template normalmente como faria com qualquer arquivo CSS/JS:

Twig

{# app/Resources/views/layout.html.twig #}
<!doctype html>
<html>
    <head>
        {# ... #}

        <link rel="stylesheet"
            href="{{ asset('assets/vendor/bootstrap/dist/css/bootstrap.min.css') }}">
    </head>

    {# ... #}
</html>

PHP

<!-- app/Resources/views/layout.html.php -->
<!doctype html>
<html>
    <head>
        {# ... #}

        <link rel="stylesheet" href="<?php echo $view['assets']->getUrl(
            'assets/vendor/bootstrap/dist/css/bootstrap.min.css'
        ) ?>">
    </head>

    {# ... #}
</html>

Ótimo trabalho! Seu site está agora usando Bootstrap. E você pode atualizar facilmente o bootstrap para a última versão e gerenciar outras dependências front-end também.

Devo Adicionar os Assets do Bower no Gitignore ou fazer Commit deles?¶

Atualmente, você provavelmente faz o commit dos assets baixados pelo Bower ao invés de adicionar o diretório (por exemplo, web/assets/vendor) ao seu arquivo .gitignore :

1	$ git add web/assets/vendor

Por quê? Ao contrário do Composer, o Bower atualmente não tem um recurso de “lock”, significando que não há garantia de que a execução do comando bower install em um servidor diferente irá lhe fornecer os assets exatos que você tem em outras máquinas. Para mais detalhes, leia o artigo Checking in front-end dependencies.

Mas, é bem provável que o Bower irá adicionar um recurso de lock futuramente (por exemplo, bower/bower#1748).