tudo o que deve saber sobre o Rails Asset Pipeline

o que é o asset pipeline?Se está a construir uma aplicação de Carris, já deve ter ouvido falar do oleoduto. O pipeline de ativos pode ser pensado como as ferramentas e mecanismos pelos quais arquivos Javascript, folhas de estilo e imagens são processados e preparados para uso pelo navegador. Estes processos podem minificar e comprimir ativos, bem como ativos pré-processamento que são escritos em outras línguas, como Coffeescript ou Sass.

o oleoduto de ativos foi criado para resolver uma variedade de problemas relacionados com ativos estáticos. Uma dessas questões é que cada ativo especificado separadamente na marcação HTML deve ser recuperado separadamente, resultando em um maior número de solicitações HTTP e, no final, um tempo de carga mais longo. Arquivos Raw Javascript e CSS também podem desperdiçar muita largura de banda com comentários, espaço extra em branco e nomes de variáveis longas. Outra questão que surge envolve a caching. Quando você serve um arquivo Javascript a partir de seu servidor, por exemplo, o navegador automaticamente cache esse arquivo por um período de tempo. Isso melhora o tempo de carga da página, mas e se esse ativo mudar em um momento posterior? O navegador não vai saber sobre ele, então ele vai continuar a usar o ativo cache até que sua vida de cache tenha expirado. Finalmente, línguas como o Coffeescript, Sass, Less e Erb tornaram mais fácil para organizar e escrever Javascript e CSS, mas o navegador não pode interpretá-los diretamente, portanto, um pré-processador é necessária para converter os arquivos em suas contrapartes apropriados antes de serem enviados para o navegador.

o oleoduto de ativos, em sua benevolência, pode resolver todos os problemas acima quando usado corretamente. Ele pode compilar vários ativos em um, minify e comprimir ativos, fornecer digesting de ativos para evitar emissões de cache, e pode pré-processar linguagens alternativas e transformá-los em Javascript e CSS.

esta publicação abrange uma variedade de tópicos relacionados com o oleoduto de activos:

• o básico de como usar o asset pipeline
• melhores práticas para a estruturação de onde colocar seus ativos
• como usar a pré-compilar matriz para especificar quais arquivos são processados pelo asset pipeline
• como Sass e Coffeescript pode ser aproveitado
• como usar os Trilhos de ativos métodos auxiliares, e
• algumas dicas

Uso Básico

Existem duas maneiras básicas de que o asset pipeline é usado:

1. Quando executar um servidor no modo de desenvolvimento, é automaticamente pré-processos e se prepara seus ativos on-the-fly.
2. no modo de produção, provavelmente irá usá-lo para pré-processar, versionizar, comprimir e compilar os seus activos. Você pode fazer isso executando o comando a seguir:

1

bundle exec rake assets:precompile

Isto irá criar (por padrão) um assets diretório no seu public/ pasta. Ele irá então adicionar todos os arquivos comprimidos e compilados naquele diretório, nos formatos apropriados e com as novas versões digeridas. Você pode então configurar Nginx ou Apache para servidor esses arquivos diretamente para que Rails não tenha que entregá-los (e executar o pré-processamento on-the-fly, etc.) si.

lembre-se que os valores por omissão podem ser alterados, por isso, se as coisas não estiverem a funcionar como esperado, verifique o seu ficheiro de configuração da aplicação em config/application.rb. Nos carris 4, o manuseamento de activos é tipicamente configurado em config/initializers/assets.rb.

estrutura de Ficheiros

é importante organizar os seus activos de uma forma que seja compreensível para si, e facilita a funcionalidade existente do oleoduto de activos. A primeira coisa que você deve saber é que todo o seu Javascript personalizado, folhas de estilo e imagens devem ir no diretório app/assets/. Por padrão, há uma pasta cada para javascripts, stylesheets, e images. Você também pode adicionar fonts, audios, e videos ao diretório app/assets/ para esses tipos de ativos. Todos os códigos de terceiros que você está usando (por exemplo, jQuery, backbone.js, etc.) deve ser colocado no directório vendor/assets/ :

1234567891011

rails-app/ app/ assets/ images/ # Image assets javascripts/ # Custom Javascript/coffeescript stylesheets/ # Custom CSS/Sass ... vendor/ assets/ javascripts/ # Javascript libraries, etc. stylesheets/ # Vendor themes, javascript library themes, etc.

Desde o servidor web automaticamente do servidor de arquivos estáticos do public/ diretório, por que não todos Javascript, a imagem e a folha de estilos ativos de ser colocado lá? Por um lado, nada na pasta public vai ser pré-processado, compilado, ou comprimido automaticamente, então, colocando ativos lá, você está completamente contornando o pipeline de ativos e perdendo todos os seus benefícios. Quando você coloca ativos lá, você também perde a capacidade de facilmente referenciá-los dentro de seu código de trilhos. Você poderia ter um modo de exibição, por exemplo, que tem o seguinte código:

12345678910

# app/assets/images/logo.png= image_tag('logo')# Outputs something like <img src="/assets/logo-.png" /># public/images/logo.png= image_tag('/images/logo.png')# Outputs something like# <img src="/images/logo.png" />

No segundo cenário (public/images/logo.png), o site só vai funcionar se ele é entregue a partir do diretório base. Também não pode tirar partido da versão do ficheiro do oleoduto.

pré-compilação

pode agora estar a perguntar – se se tudo o que colocar na pasta app/assets/javascripts/ será automaticamente pré-compilado para a sua aplicação. Felizmente, o oleoduto de ativos fornece uma maneira de especificar quais arquivos são compilados, e em que ordem. Por padrão, Aplicação.css e aplicação.js (ou seus equivalentes sass/coffeescript), juntamente com todos os ativos não-Javascript, não-CSS estão incluídos. Para incluir um arquivo css ou Javascript diferente da aplicação.css e aplicação.js, tens de o exigir de duas maneiras.:

1. adicione-o à lista pré-compilar em config/initializers/assets.rb (Carris 4) ou ao seu ficheiro de configuração da aplicação (por exemplo, config/application.rb), ou
2. inclua o ficheiro no manifesto do seu activo ou no manifesto do seu sub-ficheiro.

A primeira opção parece com isso:

12

# In config/initializers/assets.rbRails.application.config.assets.precompile += %w( some-other-file.js even-another.css )

Esta é a melhor opção para arquivos que não faz sentido para incluir somente em determinadas páginas, e não deve ser incluído em outros. Por exemplo, se você tiver uma parte do seu site que será usado como um widget incorporado iframe, você pode querer apenas widget.js e widget.css, ou similar, para ser usado nessa página. Esses arquivos teriam que ser adicionados ao array pré-compile como mostrado acima.

a segunda opção é o que deve ser usado a maior parte do tempo, e permite que seus arquivos Javascript e CSS sejam compilados em uma única aplicação.JS e uma aplicação.ficheiro css. O manifesto está escrito no topo do activo aplicável.

Em coffeescript, parece que esta:

12345

# In application.coffee##= require jquery#= require jquery_ujs#= require_tree .

acima de manifesto vai incluir o jQuery, o Rails jQuery discreto scripts do adaptador (jquery_ujs), e todos os arquivos na árvore atual (por exemplo, app/assets/javascript/*). Note que require_tree não compila os ativos recursivamente através de diretórios. Se você tiver uma pasta de arquivos que você deseja incluir, você vai ter que adicionar que ao se manifestar como bem:

1

#= require_tree ./components

mais Um manifesto directiva require_self, o que é usado para incluir o arquivo atual Javascript em que ponto da cadeia. O acima, com um require_self pode ser escrito em um arquivo .js como segue:

1234567

// In application.js////= require jquery//= require jquery_ujs//= require_tree .//= require_tree ./components//= require_self

O Sass/CSS manifesta-se usar o mesmo formato básico, mas com o comentário apropriado estilo:

123456

/** In application.css * *= require reset *= require global *= require layout */

Observe que, ao usar Sass, você precisará usar o seu @import regra para tirar proveito de variáveis e mixins, como cada arquivo compilado pelo manifesto tem o seu espaço próprio.

tenha cuidado com o uso da Directiva require_tree. Ativos na árvore será incluído em ordem alfabética, o que significa que, se um arquivo que começa com “a” depende de um arquivo que começa com “z”, você pode executar em problemas onde as peças necessárias não estão disponíveis quando o Javascript está avaliada pelo navegador. Esta questão pode ser evitada usando os guardas apropriados jQuery(document).ready(), ou window.onload, especificando uma ordem manualmente, ou pré-fixar os arquivos com números como 01_, 02_:

12345

# application.js# Note that the `.js` isn't needed at the end of the filename.##= require subfolder/library#= require subfolder/depends-on-library

Lembre-se que qualquer pré-compilado em Javascript ou CSS arquivo pode conter um manifesto no topo, assim você pode usar subpastas’ arquivos para simplificar o seu nível superior de manifesto.

Sass and Coffescript, and Rails Asset Helpers

I mentioned Sass and Coffeescript a bit in the above sections, but I have not yet gone into what they are. Se já estiver familiarizado com eles, fique à vontade para ir até a secção “Carris Asset Helpers”.

Sass e Coffeescript

Sass e Coffeescript são idiomas que utilizam preprocessadores para transformar sua sintaxe em CSS e Javascript, respectivamente. Existem várias outras línguas pré-processadas, tais como datilografado e menos, mas Sass e Coffeescript são incluídos por padrão com trilhos, e são provavelmente os mais populares. Eu não vou entrar em detalhes extensos aqui sobre estes idiomas, então, por favor, confira os links acima para mais informações.

a partir de minha experiência, enquanto SAS e Coffeescript fornecem um monte de açúcar sintático (características de código bonito), o fato de que as exceções são lançadas para o código inválido na fase de pré-processamento é suficiente para justificar a sua utilização. Coffeescript automaticamente envolve o seu código por arquivo e adiciona a palavra-chave var para as suas variáveis locais, evitando assim muitas dores de cabeça de escopo que podem acontecer mais facilmente em vanilla Javascript.

por exemplo, o seguinte código Coffeescript:

12345

$ -> $('#element').on 'click', -> state = 'clicked' window.state = 'clicked' console.log 'element clicked'

é convertido para a seguinte Javascript:

1234567891011

(function() { $(function() { return $('#element').on('click', function() { var state; state = 'clicked'; window.state = 'clicked'; return console.log('element clicked'); }); });}).call(this);

Quando o pré-processador processa o arquivo, ele automaticamente passará o código em uma função anônima ((function() {}).call(this)) e adiciona o var palavra-chave para o primeiro uso de state. Note que se você quiser usar o escopo global, você tem que especificar isso por prefixação window..

há muito mais para Coffeescript, mas o escopo automático tem sido extremamente útil para mim pessoalmente na prevenção de bugs difíceis de encontrar.

Rails Ativo Ajudantes

Outra grande característica que você só pode obter usando Sass em seu projeto Rails é o caminho de recursos auxiliares. Ao fazer referência a outros ativos de sua Sass, você pode usar a sintaxe a seguir para obter os caminhos apropriados:

123

.logo { background-image: image-url("logo.png");}

Os ajudantes image-path, asset-url, e asset-path também pode ser usado. Os ajudantes -url envolvem o caminho com url().

Erb in Assets

the asset pipeline allows you to evaluate erb code in your CSS and Javascript assets by suffixing the filename with .erb (por exemplo, application.js.erb ou application.scss.erb). Embora isto possa ser útil para adicionar caminhos de ativos ao seu Javascript, no geral eu não recomendo usar este recurso. Adiciona outro passo de pré-processamento ao arquivo, aumentando assim o tempo que leva para pré-compilar. Também pode levar a maus hábitos. Você pode ser tentado a adicionar um código que não faz sentido no tempo de compilação, como traduzir strings. Essas strings só seriam traduzidas em tempo de compilação, negando assim todo o propósito de traduzi-las. A única razão para usar Erb em um arquivo Javascript deve ser usar o auxiliar asset_path como discutido no Guia.

activo Pipeline Gotchas

a seguir estão alguns gotchas e tidbits que podem ser úteis no desenvolvimento dos activos da sua aplicação de Rails.

• como é que adiciono dados globais para o meu Javascript usar?
  • a Gon gem pode ser usada para inserir dados em escala global na página para o seu Javascript consumir. Isso é ótimo para coisas como fornecer o ID do usuário atual ou configurações do site.
• onde devo aumentar a matriz pré-compilar?
  • nos carris 4, deve aumentar a lista em config/initializers/assets.rb, e nos carris 3, deve fazê-lo em config/application.rb. Usando bens.rb ou aplicação.o rb define a lista de pré-componentes para todos os ambientes de modo que, se adicionar um ambiente (talvez staging), não terá de aumentar a lista de pré-componentes especificamente para esse novo ambiente.
    • activo.rb: Rails.application.config.assets.precompile += %w( widget.css widget.js )
    • aplicação.rb: config.assets.precompile += %w( widget.js widget.css )
• Quando devo pré-compilar os activos separadamente, aumentando a matriz pré-compilar?
  • isto raramente deve ser feito. Na maioria das vezes, a única razão pela qual você gostaria de fazer isso é se o ativo está incluído sozinho em uma página especial onde você não quer o resto dos ativos, como um widget iframe-embedded. Use a sua aplicação.js e aplicação.o css manifesta-se a retirar os seus bens.
• devo permitir que os carris sirvam ficheiros estáticos?Sim. Isto segue as orientações da aplicação de doze factores e evita erros se se esqueceu de incluir um ficheiro na lista pré-compilar ou se se esqueceu de o pré-compilar.
• estabelecido config.serve_static_assets = true nos carris 3 e config.serve_static_files = true nos carris 4.

1234567

location ~ ^/assets/ { expires 1y; add_header Cache-Control public; add_header ETag ""; break;}

• o Que é manifesto.YML ou Manifesto-.json?
  • o manifesto.YML (Carris 3) ou Manifesto-.os ficheiros json (Rails 4) são criados automaticamente quando você pré-compilar os seus activos com rake assets:precompile. Eles contêm informações sobre quais arquivos devem ser usados pelo seu aplicativo.
• Que tipos de arquivos não devem ser incluídos no pipeline de ativos?
  • normalmente você vai querer manter grandes arquivos (vídeos, grande número de downloads de PDF, etc.) em um repositório separado ou em um gerenciador de arquivos em nuvem, como AWS S3. Os arquivos podem então ser referenciados a partir do seu aplicativo, mas não tem que escavar o seu repositório git.
• Como posso obter meus recursos do Rails 3 para compilar mais rápido?
  • utilize a gema turbo-sprockets-rails3.
• posso usar um CDN (rede de distribuição de conteúdo) para os meus activos?Sim! A digestão, ou impressão digital, misturada em cada ativo faz com que eles trabalhem muito bem com CDNs. Configure o seu CDN para servir os activos da sua aplicação de Carris, depois configure a configuração config.action_controller.asset_host para o domínio apropriado para o seu CDN (por exemplo, config.action_controller.asset_host = 'mycdn.fictional-cdn.com'). Eu recomendo usar variáveis de ambiente para definir isto: config.action_controller.asset_host = ENV.

encerrá-lo com

usando o pipeline de ativos corretamente pode melhorar a qualidade geral de sua aplicação em termos de desempenho, resiliência e limpeza de código. Ao usar os recursos do oleoduto de ativos, você pode automaticamente superar algumas das maiores questões relacionadas à codificação e entrega de ativos estáticos.