Entendendo o pipeline de ativos do Rails

Ruby on Rails é um framework de desenvolvimento web full-stack escrito em Ruby. Para um desenvolvedor que começou a trabalhar com Ruby on Rails, muitas coisas parecerão mágicas, como variáveis ​​de instância definidas no controlador acessível pelas visualizações. Outra coisa é o pipeline de ativos, mas às vezes cria caos, especialmente ao mover as coisas para a produção. Uma simples pesquisa no Google produziria uma solução naquele momento, mas não pareceria completa. Este post lhe dará uma melhor compreensão sobre o pipeline de ativos do Rails para que você não se sinta preso a ele na próxima vez.

Pipeline de ativos do Rails

O código escrito dentro das pastas app/assets e vendor/assets compõe a maior parte do front-end em qualquer aplicativo Ruby on Rails. Qualquer Javascript ou CSS que escrevemos dentro desta pasta é compilado e reduzido antes de ser servido aos navegadores em produção. Tudo isso é cuidado automaticamente pelo pipeline de ativos que é enviado junto com o Rails por padrão. Esse pipeline de ativos é implementado pela gem sprockets-rails. Ele também nos permite escrever ativos em uma linguagem diferente ou pré-processadores, e os compila em CSS e Javascript compreensível para o navegador.

Um aplicativo Ruby on Rails no momento da criação é fornecido com dois arquivos de manifesto application.js e application.css. Esses dois arquivos, por padrão, contêm poucas linhas de código significativo que são consideradas obrigatórias. Vamos dar uma olhada no conteúdo desses arquivos e tentar descobrir para que servem.

Arquivos de manifesto

/*
* Este é um arquivo de manifesto que será compilado em application.css, que incluirá todos os arquivos
* listado abaixo.
*
* Qualquer arquivo CSS e SCSS dentro deste diretório, lib/assets/stylesheets, vendor/assets/stylesheets,
* ou fornecedor/ativos/folhas de estilo de plugins, se houver, podem ser referenciados aqui usando um caminho relativo.
*
* Você pode adicionar estilos de todo o aplicativo a este arquivo e eles aparecerão na parte superior da
* arquivo compilado, mas geralmente é melhor criar um novo arquivo por escopo de estilo.
*= exigir_self
*= require_tree .
*/

Este é o arquivo de manifesto CSS padrão, que inclui todos os arquivos mencionados em um único arquivo application.css. A palavra-chave require aqui funciona da mesma forma que a palavra-chave require em ruby. Ele torna um arquivo acessível dentro do arquivo do qual é chamado. A palavra-chave require procura os arquivos mencionados na pasta app/assets/ primeiro, se não for encontrada lá, ela procurará na pasta vendor/assets/.

'require_self' e 'require_tree .'

'require_self' carrega todo o conteúdo daquele arquivo de onde ele é chamado, no nosso caso o application.css na linha onde é mencionado. 'require_tree .' carrega todo o conteúdo na mesma pasta onde é referenciado na linha onde é mencionado. Se precisarmos incluir todos os arquivos de uma subpasta, use 'require_tree ./folder_name/'. Isso é útil ao usar CSS simples. Mas se quisermos usar SASS/SCSS, usar variáveis ​​globais para cores etc, precisamos importar o arquivo CSS usando o método SCSS `@import` em vez de `require`.

Caminhos de recursos

Não há grande diferença entre a pasta app/assets e vendor/assets. Por convenção, é aconselhável usar a pasta app/assets para arquivos CSS e Javascript personalizados que criamos e a pasta de fornecedores/assets do usuário para CSS e Javascript de qualquer plug-in de terceiros.

A ordem em que os ativos são pesquisados ​​é a seguinte:

/app/assets/images

/app/assets/javascripts

/app/assets/folhas de estilo

/vendor/assets/images

/assets/javascripts

/assets/folha de estilo

/[recursos incluídos por gemas]

Pré-compilação de ativos

Para compilar todos os arquivos e minimizá-los devemos executar rake assets:precompile. Este comando inicia uma tarefa de rake que encontra os arquivos mencionados em application.css, se eles são escritos em SCSS/SASS é compilado para CSS, e então adicionado como parte do arquivo application.css. Este arquivo application.css é vinculado a cada página usando a tag de link da folha de estilo, um auxiliar de visualização do Rails. O mesmo acontece para application.js.

Por padrão, apenas application.css e application.js são os arquivos de manifesto e, portanto, são pré-compilados. Mas podemos querer usar um ou mais arquivos como arquivos de manifesto para diferentes layouts. Nesse caso, esses arquivos devem ser adicionados ao array de pré-compilação em config/initializers/asset.rb

Rails.application.config.assets.precompile += ['dashboard.js', 'dashboard.css']

Aqui, junto com os arquivos application.css e application.js, os arquivos dashboard.css e dashboard.js são considerados manifestos. Portanto, durante a pré-compilação, esses arquivos também são pré-compilados. Após a pré-compilação, esses arquivos recém-gerados são colocados na pasta public/assets.

application-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css

application-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js

application-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css.gz

application-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js.gz

dashboard-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

dashboard-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

pasta public/assets

Esta é a terceira pasta onde podemos encontrar ativos em um aplicativo Rails, mas adicionar ativos aqui diretamente não é recomendado, a menos que seja um ativo estático e não mude nada. Também não poderemos referenciar nenhum arquivo colocado nesta pasta usando ajudantes de url do Rails. Os ativos geralmente são pré-compilados apenas no ambiente de produção. Se você deseja pré-compilar ativos em local, execute rake assets:precompile RAILS_ENV=production in local.

dashboard-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

dashboard-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

Se você der uma olhada nos nomes de arquivos acima, eles têm 64 caracteres aleatórios anexados a eles. Esse processo é chamado de impressão digital, o que faz com que todo o nome do arquivo dependa do conteúdo do arquivo. Essa técnica é realmente útil para armazenar em cache os ativos. Se o conteúdo do arquivo permanecer o mesmo, o nome dos arquivos também permanecerá o mesmo, portanto, ele pode ser armazenado em cache. Se o conteúdo mudar, o nome mudará e o cache também.

Auxiliares de URL de recursos Sass

Sempre que colocamos algumas fontes, imagens na pasta app/assets e tentamos acessá-las a partir de arquivos CSS, SCSS, funcionará bem no desenvolvimento. Mas na maioria das vezes ele quebra na produção dizendo que o recurso não foi encontrado /assets/bg-image.jpg. Isso acontece especialmente para os pacotes de fontes que incluímos. Isso ocorre porque teríamos dado algo assim para a imagem de fundo

imagem de fundo: url('/images/header_background.jpg');

Em produção, ele tentará obter a imagem de /images/header_background.jpg. Mas não haverá arquivos presentes na pasta pública chamada 'header_background.jpg' a menos que coloquemos o arquivo no diretório público. Normalmente, os colocaríamos em aplicativos/ativos ou fornecedores/ativos. Portanto, durante a pré-compilação, ele será compilado e a impressão digital será adicionada a todos os ativos no js/CSS. Portanto, todos os arquivos de imagem, arquivos de fonte terão impressões digitais em seu nome e isso não funcionará.

header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png company_logo-ad045423017cb12f23b6c2ccb746518586f0cb77087d7cng38b1800af6a4b

Os arquivos são compilados e adicionados conforme mostrado acima na pasta pública. Então, para fazer referência a isso no CSS, precisamos usar auxiliares de caminho de ativos fornecidos por rails. Em vez de 'url('/images/header_backgroung.png')' use 'image-url('header_background.png')'. Após a pré-compilação, isso será adicionado visto como

imagem de fundo: url('/images/header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png');

Espero que este post tenha ajudado você a se familiarizar com o pipeline de ativos do Rails. Uma melhor compreensão do pipeline de ativos ajudará você a manter o código relacionado ao front-end mais organizado e sustentável. Se você deseja explorar mais sobre o pipeline de ativos, aqui está o link para o guia oficial.

Fique atento ao nosso próximo artigo para descobrir se você tem os dados certos para Análise de Sentimento

Planejando adquirir dados da web? Nós estamos aqui para ajudar. Deixe-nos saber sobre suas necessidades.