Descripción de la canalización de activos de Rails

Ruby on Rails es un marco de desarrollo web de pila completa escrito en Ruby. Para un desarrollador que acaba de comenzar a trabajar con Ruby on Rails, muchas cosas se sentirán mágicas, como las variables de instancia definidas en el controlador accesible por las vistas. Otra cosa similar es la tubería de activos, pero a veces crea caos, especialmente cuando se mueven las cosas a producción. Una simple búsqueda en Google arrojaría una solución en ese momento, pero no se sentiría completa. Esta publicación le brindará una mejor comprensión sobre la canalización de activos de Rails para que no se sienta atascado con ella la próxima vez.

Canalización de activos de Rails

El código escrito dentro de las carpetas de aplicaciones/activos y proveedores/activos constituye la mayor parte del front-end en cualquier aplicación de Ruby on Rails. Cualquier Javascript o CSS que escribimos dentro de esta carpeta se compila y minimiza antes de que se sirva a los navegadores en producción. La canalización de activos se encarga automáticamente de todo esto, que se envía junto con Rails de forma predeterminada. Esta canalización de activos se implementa mediante la gema sprockets-rails. Incluso también nos permite escribir activos en un lenguaje diferente o preprocesadores, y los compila a CSS y Javascript comprensibles para el navegador.

Una aplicación de Ruby on Rails en el momento de la creación se proporciona con dos archivos de manifiesto application.js y application.css. Estos dos archivos por defecto contienen pocas líneas de código significativo que se consideran obligatorias. Echemos un vistazo al contenido de esos archivos e intentemos averiguar para qué sirven.

Archivos de manifiesto

/*
* Este es un archivo de manifiesto que se compilará en application.css, que incluirá todos los archivos
* enumerados a continuación.
*
* Cualquier archivo CSS y SCSS dentro de este directorio, lib/assets/stylesheets, vendor/assets/stylesheets,
* o proveedor/activos/hojas de estilo de complementos, si los hay, se puede hacer referencia aquí usando una ruta relativa.
*
* Puede agregar estilos para toda la aplicación a este archivo y aparecerán en la parte superior de la
* archivo compilado, pero generalmente es mejor crear un nuevo archivo por ámbito de estilo.
*= require_self
*= árbol_requerido.
*/

Este es el archivo de manifiesto CSS predeterminado, que incluye todos los archivos mencionados en un solo archivo application.css. La palabra clave require aquí funciona igual que la palabra clave require en Ruby. Hace que un archivo sea accesible dentro del archivo desde el que se llama. La palabra clave require busca primero los archivos mencionados en la carpeta app/assets/, si no se encuentra allí, buscará en la carpeta vendor/assets/.

'require_self' y 'require_tree'.

'require_self' carga todo el contenido de ese archivo desde donde se llama, en nuestro caso, application.css en la línea donde se menciona. 'árbol_requerido'. carga todo el contenido en la misma carpeta donde se hace referencia en la línea donde se menciona. Si necesitamos incluir todos los archivos de una subcarpeta, use 'require_tree ./folder_name/'. Esto es útil cuando se usa CSS simple. Pero si queremos usar SASS/SCSS, usar variables globales para colores, etc., necesitamos importar el archivo CSS usando el método SCSS `@import` en lugar de `require`.

Rutas de activos

No hay una gran diferencia entre la aplicación/activos y la carpeta proveedor/activos. Por convención, se recomienda utilizar la carpeta de aplicaciones/activos para los archivos CSS y Javascript personalizados que creamos y la carpeta de proveedores/activos del usuario para CSS y Javascript de complementos de terceros.

El orden en que se buscan los activos es el siguiente:

/aplicación/activos/imágenes

/aplicación/activos/javascripts

/aplicación/activos/hojas de estilo

/proveedor/activos/imágenes

/activos/javascripts

/activos/hoja de estilo

/[activos incluidos por gemas]

Precompilación de activos

Para compilar todos los archivos y minimizarlos debemos ejecutar rake assets:precompile. Este comando inicia una tarea de rake que encuentra los archivos mencionados en application.css, si están escritos en SCSS/SASS, se compilan en CSS y luego se agregan como parte del archivo application.css. Este archivo application.css está vinculado a cada página mediante la etiqueta de enlace de hoja de estilo, un asistente de vista de Rails. Lo mismo sucede con application.js.

De forma predeterminada, solo application.css y application.js son los archivos de manifiesto y, por lo tanto, están precompilados. Pero es posible que deseemos usar uno o más archivos como archivos de manifiesto para diferentes diseños. En ese caso, estos archivos deben agregarse a la matriz de precompilación en config/initializers/asset.rb

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

Aquí, junto con los archivos application.css y application.js, los archivos dashboard.css y dashboard.js se consideran manifiestos. Entonces, durante la precompilación, estos archivos también se precompilan. Después de la precompilación, estos archivos recién generados se colocan en la carpeta public/assets.

aplicación-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css

aplicación-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js

aplicación-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css.gz

aplicación-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js.gz

tablero-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

tablero-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

carpeta pública/activos

Esta es la tercera carpeta donde podemos encontrar activos en una aplicación Rails, pero no se recomienda agregar activos aquí directamente a menos que sea un activo estático y no cambie en absoluto. Además, no podremos hacer referencia a ningún archivo colocado en esta carpeta utilizando los asistentes de URL de Rails. Los activos generalmente se precompilan solo en el entorno de producción. Si desea precompilar activos en local, ejecute rake assets:precompile RAILS_ENV=producción en local.

tablero-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

tablero-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

Si observa los nombres de archivo anteriores, tienen 64 caracteres aleatorios adjuntos. Este proceso se llama huella digital, lo que hace que el nombre completo del archivo dependa del contenido del archivo. Esta técnica es realmente útil para almacenar en caché los activos. Si el contenido del archivo sigue siendo el mismo, el nombre de los archivos también seguirá siendo el mismo, por lo tanto, se puede almacenar en caché. Si el contenido cambia, el nombre cambia y también lo hace el caché.

Ayudantes de URL de activos de Sass

Cada vez que coloquemos algunas fuentes, imágenes en la carpeta de aplicaciones/activos y luego intentemos acceder a ellas desde archivos CSS, SCSS, funcionará bien en el desarrollo. Pero la mayoría de las veces se rompe en producción diciendo que no se encontró el recurso /assets/bg-image.jpg. Esto sucede especialmente con los paquetes de fuentes que incluimos. Esto se debe a que habríamos dado algo como esto para la imagen de fondo.

imagen de fondo: url('/images/header_background.jpg');

En producción, intentará obtener la imagen de /images/header_background.jpg. Pero no habrá archivos presentes en la carpeta pública llamada 'header_background.jpg' a menos que coloquemos el archivo en el directorio público. Normalmente los colocaríamos en aplicación/activos o proveedor/activos. Entonces, durante la precompilación, se compilará y se agregará la huella digital a todos los activos no js/CSS. Por lo tanto, todos los archivos de imagen, los archivos de fuentes llevarán huellas dactilares en su nombre y esto no funcionará.

header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png company_logo-ad045423017cb12f23b6c2ccb746518586f0cb77080d7cb38b1800caf73a4b.png4

Los archivos se compilan y agregan como se muestra arriba en la carpeta pública. Entonces, para hacer referencia a esto en el CSS, necesitamos usar asistentes de ruta de activos proporcionados por Rails. En lugar de 'url('/images/header_backgroung.png')' use 'image-url('header_background.png')'. Después de la precompilación, esto se agregará visto como

imagen de fondo: url('/images/header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png');

Espero que esta publicación lo haya ayudado a obtener información sobre la canalización de activos de Rails. Una mejor comprensión de la canalización de activos lo ayudará a mantener el código relacionado con el front-end más organizado y mantenible. Si desea explorar más sobre la tubería de activos, aquí está el enlace para la guía oficial.

Estén atentos a nuestro próximo artículo para averiguar si tiene los datos correctos para el análisis de sentimiento

¿Planea adquirir datos de la web? Estamos aquí para ayudar. Háganos saber acerca de sus requisitos.