Bower e Rails. Amigos para sempre.

O Bower é um gerenciador de pacotes super moderno que fornece uma grande variedade de frameworks e plug-ins Javascript e CSS, que são executados via Node. Eu acho muito útil na hora de prototipar porque eu posso simplesmente queimar uma série de coisas até encontrar exatamente o que estou procurando, e recentemente pensei “Como eu poderia usar isso com o pipeline Rails” . Felizmente a resposta é bastante simples, mas, como a maioria das coisas, existem níveis de integração, começando com o simples (mas menos eficiente), indo para o mais complicado, abordarei meu método preferido.

A primeira coisa a fazer é garantir que você tenha tudo configurado de que precisa, então obtenha a configuração do Node e do NPM (o Google é seu amigo) e instale o Bower:

npm install -g bower

Em seguida, você precisa fazer o Bower trabalhar bem com a estrutura de diretórios do Rails. Para fazer isso você tem que modificar o arquivo de configuração principal do Bowers .bowerrc que precisa estar na sua pasta de usuário (não existe por padrão). Faça com que fique assim

{
  "directory": "app/assets/components"
}

Você pode configurá-lo de acordo com sua maneira de trabalhar, como a pasta do fornecedor, por exemplo, mas acho mais fácil em uma pasta específica dentro de ativos. A próxima etapa é definir o que você deseja que o Bower instale em seu projeto, então comece procurando o que você precisa na lista de componentes e então você pode construir seu arquivo bower.json , que ficará na raiz do seu projeto

{
  "name": "my-project",
    "dependencies": {
    "underscore": "~1.4.4"
  }
}

Você pode adicionar quaisquer pacotes que desejar neste ponto, você também pode usar as ferramentas de linha de comando do Bower para pesquisar pacotes:

bower search moment

Que retornará resultados como este

Search results:

moment git://github.com/timrwood/moment.git
momentjs git://github.com/moment/moment
angular-moment git://github.com/urish/angular-moment.git
momentjs-web-lang git://github.com/vperron/momentjs-web-lang.git
moment-range git://github.com/gf3/moment-range.git
moment-timezone git://github.com/moment/moment-timezone.git
angular-momentum-scroll git://github.com/wzr1337/bower-angular-momentum-scroll.git
momentum-css git://github.com/edgincvg/momentum-css.git
moment-jalaali git://github.com/behrang/moment-jalaali.git
moment-fromNowUpdate git://github.com/garethadavies/moment.fromNowUpdate.git

Você pode então instalar o pacote

bower install moment --save

Adicionar o parâmetro de salvamento garante que o Bower adicione a dependência ao seu arquivo bower.json . Você pode deixar isso de fora se quiser apenas experimentar e depois poderá adicioná-los ao seu arquivo de dependência mais tarde. Você também pode desinstalar pacotes

bower uninstall moment

Você também teria que removê-lo de seu arquivo bower.json .

A etapa final é fazer com que o Rails funcione bem com o diretório de componentes do Bower, bem como incluí-los nos arquivos CSS e JS relevantes. Começando com a obtenção do Rails para adicioná-lo ao pipeline de ativos, você precisará modificar o arquivo application.rb no / config / dir e adicionar o seguinte dentro da classe * ‘Application’ :

// ...
config.assets.paths << Rails.root.join('app', 'assets', 'components')
// ...

Certifique-se de modificar isso se não estiver usando a pasta de componentes.

Então é apenas um caso de chamar os pacotes em seu código de ativo principal, para arquivos Javascript é tão simples quanto adicionar

//= require underscore/underscore-min

Para o componente Bower que você deseja adicionar, onde é apenas o caminho relativo ao diretório de componentes e, em seguida, o arquivo JS dentro dele. E para CSS (SASS neste caso):

@import "normalize-css/normalize";

Novamente, onde o caminho é relativo ao diretório de componentes .