Comenzando con la tubería de activos, Parte 2

Para el final de este artículo usted debe tener una buena comprensión de las características de la tubería del activo en carriles que los principiantes tienen generalmente un rato difícil. También tendrá un buen conocimiento introductorio de compilación, huellas digitales, almacenamiento en caché, minificación y compresión. La tubería le da un montón de kilometraje, y una buena comprensión de por qué es tan importante como conocer sus características.

Temas

• Sprockets?
• Precompilar activos
• MD5 Huella digital
• Enlaces de activos
• Estilos Pimped

Sprockets?

El Pipeline de Activos en Rails es manejado por la gema de sprockets-rails. De forma predeterminada, se habilita al crear una nueva aplicación Rails. Sprockets es una biblioteca Ruby y le ayuda a administrar sus activos JavaScript y CSS.

Además, se encarga de compilar y de preprocesar lenguajes de nivel superior como Sass, SCSS y CoffeeScript. Preprocesar simplemente significa que tus estilos, HTML o JavaScript se generan después de escribir código en otro lenguaje. Por ejemplo, las hojas de estilo Sass se precompilan en CSS válido. Dado que los navegadores no pueden comprender cosas como CoffeeScript, tenemos que preprocesarlo primero.

Hay tres gemas que juegan un papel vital en todo esto:

• coffee-rails
• uglifier
• sass-rails

Sass-rails le permite escribir su sabor Sass de elección para la creación de su CSS, coffee-rails le da una mejor sintaxis para escribir su JavaScript, y uglifier a su vez comprime estos activos. Por cierto, sass-rails se encarga de comprimir los archivos CSS por sí mismo. Las tres joyas se añadirán automáticamente a tu Gemfile cuando crees una nueva aplicación de Rails. Si tiene una razón para no utilizar Sprockets con Rails, puede omitirlo desde la línea de comandos cuando inicie su aplicación:

Terminal

rails new appname --skip-sprockets

Este comando impide que las gemas antes mencionadas se agreguen a tu Gemfile y te da una versión diferente del archivo config/application.rb. Ahora necesita configurar su propia solución para manejar sus activos.

Procesamiento

Cuando preprocesas algo como CoffeeScript en JS válido, o Sass en CSS, también tienes la opción de procesar estos archivos un poco más. Minfication y compresión son los dos grandes. Minificación se deshace de las cosas que el navegador no se preocupa por el espacio blanco y los comentarios son buenos candidatos, por ejemplo. Sass también puede tratar directamente con la minificación también. O simplemente usa el valor predeterminado de Rails del compresor YUI cuando se trata de hojas de estilo. Simplemente aparte, Rails incluso le permite escribir y configurar su propio compresor personalizado.

Debo mencionar que Sass tiene una versión comprimida de estilos de salida. Esto es realmente confuso ya que está minifying sus hojas de estilo. La compresión es un proceso diferente y reduce significativamente el tamaño del archivo. La compresión, o gzipping, apunta a bits repetitivos del código y los reemplaza con punteros que ocupan menos espacio. Por lo tanto, cuanto más repetitivos sean sus archivos de activos, más comprimidos y reducidos en tamaño.

Minificación es bastante agradable, pero verá las mayores reducciones de tamaño de archivo cuando utilice gzipping. No es raro que los archivos se reduzcan al 14% de su tamaño original si ambos los minify y comprimirlos. Cuando usted piensa en la descarga de toneladas de activos a través de redes más lentas, esto puede ser de gran beneficio.

Precompilar activos

Para la producción, sus activos deben ser compilados primero. Los archivos que coloque en app/assets suelen ser preprocesados ​​antes de que se puedan publicar. ¿De qué estamos hablando aqui? Supongamos que ha trabajado en alguna nueva aplicación que funcione en su servidor local. Sus archivos Sass y su JavaScript con sabor a CoffeeScript funcionan mágicamente desde el principio. Cool, pero ¿qué pasa si quieres empujar esto a un servidor de producción? Un servidor de este tipo, responsable de entregar este contenido a un público posiblemente mucho más grande, tiene unas pocas demandas diferentes que su servidor local.

De forma predeterminada, Rails buscará los archivos que tengan nombre de application e intente precompilarlos para usted. En este paso, los recursos se compilan a partir de lenguajes de alto nivel como Sass en CSS, y se concatenan juntos, desde múltiples archivos en menos paquetes de archivos. Tener tan pocos archivos como sea posible es beneficioso para el rendimiento y la velocidad. La compresión de su tamaño al mínimo también es de gran importancia, especialmente para aplicaciones más grandes. Además, los archivos también se almacenan en caché. Eso significa que sólo carga nuevos activos cuando se han cambiado en su final.

Compilacion

Tiene dos opciones de dónde desea compilar sus activos. Se compila en su servidor de producción o localmente. La compilación local significa que usted ejecuta este proceso en su propia máquina primero y después lo empuja a la producción. Esto tiene las ventajas de que no necesita acceso de escritura al sistema de archivos en un servidor de producción y, si implementa en varios servidores, puede realizar este proceso sólo una vez. No necesitar precompilar sus activos en el servidor si los cambios implementados no incluyen cambios de activos es otro beneficio de precompilar localmente.

Precompilar activos es una de estas cosas que debemos hacer antes de enviarles nuestros "puros", compilados CSS, HTML y JS. Los servidores probablemente no necesitarán saber cómo tratar con lenguajes de alto nivel como Sass, Slim, y lo que sea. Ya tienen suficientes responsabilidades. Para que funcione, usted es responsable de tener las gemas de compresión y minificación listas en su máquina. Puede poner estos activos compilados en su repo de Git o cualquier herramienta de control de versiones que prefiera y despliegue sólo estos activos finales en producción.

Rails le ofrece una tarea Rake que se encarga de los activos de precompilación, sin embargo. Tal tarea es simplemente una serie de pasos predefinidos que se ejecutan para alcanzar una meta específica. El uso de la herramienta de compilación Rake para estas cosas es muy común en la tierra de Ruby. Usted puede escribir fácilmente sus propias tareas en Rake usted mismo. Rails hace esto muy fácil. Fuera de la caja, Rails viene con el directorio lib/tasks donde puede aparcar cómodamente sus tareas de Rake. No es necesario realizar ninguna otra configuración. Así que cuando ejecutes:

Terminal

rake assets:precompile

or

bundle exec rake assets:precompile

Piñones llevará los activos que puede encontrar en su ruta de búsqueda y preprocesar o compilarlos en public/assets. La salida se verá así:.

Terminal

your_rails_app/public/assets/application-454840c9c54adb8be789d8ca014fa0a02022a5dcd00523f2dd0469bc990ed0e6.js

your_rails_app/public/assets/application-454840c9c54adb8be789d8ca014fa0a02022a5dcd00523f2dd0469bc990ed0e6.js.gz

your_rails_app/public/assets/application-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css

your_rails_app/public/assets/application-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css.gz

Cuando se desea compilar localmente, se recomienda cambiar la ubicación en la que Rails genera sus activos. Si no lo hace, tendría que recompilar los activos para el desarrollo porque no vería cambios locales sin él. Sprockets utilizará la URL modificada para servir sus activos en el modo de desarrollo.

config/environments/development.rb

config.assets.prefix = "/dev-assets"

Para la producción, los archivos compilados seguirán siendo colocados en un directorio /assets por defecto.

Usted terminará con activos individuales, también conocidos como archivos de manifiesto como application.js y application.css. De esta manera, no necesitará enlazar manualmente todos sus activos a mano en su marcado y evitar tener que cargar múltiples archivos de activos en lugar de uno para cada categoría.

El número largo que ves que se adjunta se llama la huella digital. Se utiliza para comparar archivos y ver si su contenido podría haber cambiado antes de que necesitan ser almacenados en caché de nuevo. Lo que también se puede ver es que se obtienen dos versiones del mismo archivo. El que tiene la extensión de archivo .gz es la versión gzip de los recursos. gzip se utiliza para la compresión y descompresión de archivos y para cortar un poco de la grasa que no queremos haber enviado a través del cable. Otra mejora para aumentar la velocidad, básicamente.

En caso de que sienta la necesidad de precompilar sus activos en un servidor de producción, el siguiente comando siguiente creará los activos directamente en su servidor(es). Sin embargo, sólo agrego esto en aras de la integridad. No estoy seguro de que usted tendrá mucha necesidad de esto como un principiante en este momento.

Terminal

RAILS_ENV=production bin/rails assets:precompile

Manifiesto de archivos y directivas

Estos archivos de manifiesto como application.css incluyen la lógica para importar todos los archivos en su ruta de búsqueda. Rails importa estos parciales primero y luego los compila en un único archivo autoritario que el navegador utilizará. Eso es sólo un valor predeterminado, sin embargo, y puede cambiar eso, por supuesto.

Cada archivo de manifiesto tiene directivas, que son instrucciones que determinan qué archivos se necesitan para crear estos archivos de manifiesto. El orden en que se importan se determina en allí también.

El resultado final contiene todos los contenidos de todos los archivos a los que tienen acceso las directivas. Los piñones cargan estos archivos, hacen el preprocesamiento necesario, y redondean la cosa entera al comprimir el resultado. ¡Muy útil!

Para su archivo de manifiesto CSS, app/assets/stylesheets/application.css, esto se parece a lo siguiente:

/* ...
*= require_self
*= require_tree .
*/

El equivalente de JavaScript, app/assets/javascripts/application.js, se ve similar:

// ...
//= require jquery
//= require jquery_ujs
//= require_tree .

Como se puede ver en este ejemplo, requerir jQuery primero es imprescindible si confía en él dentro de su código JavaScript.

MD5 ¿Huellas dactilares?

De forma predeterminada, Rails crea una huella digital para cada nombre de archivo durante el proceso de precompilación. Más específicamente, Sprockets crea un hash MD5 del contenido de sus archivos. La cadena hexadecimal de 32 caracteres resultante, también conocida como digest, se adjunta a los nombres de archivo de sus activos.

Eso significa que si el contenido de sus archivos cambia, sus nombres de archivo, la parte hash MD5 de ella, también cambiará. ¿Por qué se llama huellas dactilares? Tales hashes tienen una probabilidad muy alta de ser únicos y por lo tanto se pueden utilizar para identificar la unicidad de un archivo, al igual que las huellas dactilares.

Ejemplo de nombre de archivo

navbar-908e25f4bf641868d8683022a5b62f54.css

No estamos hablando de una cadena hexadecimal aleatorizada. El contenido de los archivos se empuja a través de una función matemática que lo convierte en una única secuencia de 32 caracteres. Esto significa que obtendrá el mismo resultado de hash cuando aplique la función al mismo contenido dos veces, o sin embargo a menudo le gusta.

A través de ese mecanismo inteligente, es posible comprobar los cambios y actualizar sólo los archivos que darían lugar a un hash MD5 diferente. Para fines de caché, esto es de oro. Si no ha cambiado nada, el navegador web lo almacena en caché para las solicitudes futuras. En ese contexto, la anulación de memoria caché significa simplemente que los clientes remotos solicitarán una nueva copia de un archivo porque la huella digital ha cambiado. Por supuesto, una nueva huella digital se creará y se agregará al nombre de archivo de su activo.

MD5("The quick brown fox jumps over the lazy dog")

Salida

9e107d9d372bb6826bd81d3542a419d6

Puede desactivar las huellas dactilares tanto para la producción como para el desarrollo:

config/environments/production.rb

config.assets.digest = false

config/environments/development.rb

config.assets.digest = false

Enlaces de activos

No olvidemos por qué es bueno tener el Oleoducto de Activos. Su objetivo es facilitar la gestión de los activos. Escribir estilos y comportamientos para aplicaciones se ha vuelto cada vez más matizado y complejo. Algunas de las herramientas también se han vuelto más alegres para trabajar. Preparar los activos para la producción y servirlos debe ser al menos un poco más trivial y ahorrarle tiempo.

Tener un poco de automatización y convenciones para organizar los activos es realmente agradable porque hace que su trabajo real fácil en el camino. El Pipeline de activos incluso endulza el trato y redondea las cosas con unos pocos enlaces de activos azucarados. Esto hace que sea una maravilla para hacer frente a los activos en su código. Echemos un vistazo a algunos de los sospechosos habituales que esperamos aumentar aún más su nivel de felicidad:

• javascript_include_tag
• stylesheet_link_tag
• image_tag

Desde su extracción, Sprockets no cambió la forma en que puede vincular sus activos; Sigue funcionando igual que antes. Los ejemplos anteriores son métodos de conveniencia que toman el nombre de sus activos como argumentos. A continuación, averiguar los nombres de extensión para los archivos correlacionados ellos mismos. Estos métodos de ayuda no sólo crean las etiquetas necesarias para el HTML adecuado, sino que también se ocupan de vincular a los archivos de activos. Ellos no son obligatorios, por supuesto, pero sigue siendo agradable tener y muy legible también. Hay un poco menos desorden en su marcado si usted hace uso de ellos.

Some View

<%= stylesheet_link_tag "some-stylesheet", media: "all" %>

<%= javascript_include_tag "some-js-file" %>

<%= image_tag "some-image.png" %>

En su archivo de diseño global, Rails le da tres de ellos.

app/views/layouts/application.html.erb

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

<%= csrf_meta_tags %>

Esto resulta en la salida siguiente en el HTML representado:

<link rel="stylesheet" media="all" href="/assets/application.self-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css?body=1" data-turbolinks-track="true" />

<script src="/assets/application.self-3b8dabdc891efe46b9a144b400ad69e37d7e5876bdc39dee783419a69d7ca819.js?body=1" data-turbolinks-track="true"></script>

<meta name="csrf-param" content="authenticity_token" />

<meta name="csrf-token" content="hwaD9ubZUD8tKOrHAA9wgccbxmnOW5mSl4VzU7S2UmPvTXv9fVJND25/YZOz84ntdpP0rhun6ShSEkkZrmcsbQ==" />

Veamos más de cerca cómo manejar los activos de la imagen.

image_tag

Las imágenes ubicadas en el directorio public/assets/images se pueden acceder a través de este método de conveniencia, sin necesidad de jugar con los nombres de ruta. Este es un buen ejemplo de "convención sobre configuración" en el trabajo.

Archivo some.html.erb

<%= image_tag "some-image.png" %>

Esto daría como resultado lo siguiente:

<img src="http://example.com/assets/some-image.png" alt="Some image"  />

Si está activado, Sprockets servirá estos archivos si se encuentra. Cuando un archivo como some-image.png es una huella dactilar, como some-image-9e107d9d372bb6826bd81d3542a419d6.png, se tratará de la misma manera.

Si necesita otros directorios dentro de public/assets/images o dentro de app/assets/images  para organizar sus imágenes, tal vez algo extra para iconos o archivos svg, Rails no tendrá ningún problema para encontrarlos. Sólo tiene que agregar el nombre del directorio primero:

<%= image_tag "icons/some-icon.png" %>

<%= image_tag "svgs/some.svg" %>

Ver, ninguna ciencia del cohete, y los otros ayudantes del activo se manejan la misma manera.

Estilos eficientes

CSS & ERB

El Pipeline de activos está configurado para evaluar el código ERB desde el principio. Todo lo que necesitas hacer es añadir la extensión .erb a un archivo y estás listo para ir-Sprockets se hará cargo del resto. Cuando genera controladores, también creará vistas que ya tengan la extensión .erb. Lo mismo ocurre con los scaffolds.

Pero esto también funciona para las hojas de estilo. Puede mejorarlos utilizando ERB en ellos. Simplemente cree algo como los archivos example.css.erb. No estoy seguro si es una técnica ampliamente utilizada, sin embargo. Puede ser muy útil, pero probablemente sería cauteloso sobre el uso excesivo de esto ya que se puede llevar muy lejos. Estos archivos CSS dinámicos probablemente no deben contener demasiada lógica. Se siente como un olor de código, pero el daño parece estar contenido si confía en los ayudantes ERB en su mayoría.

.some-class { 
  background-image: url(<%= asset_path 'some-image.png' %>) 
}

Esta imagen se encontrará si la tiene en una de las rutas de carga del Pipeline de activos-generalmente en algún lugar bajo app/assets/images. Lo bueno es, si este archivo ya ha sido procesado y las huellas dactilares, a continuación, Sprockets utilizará la ruta de acceso public/assets y lo encontrara allí. Lo mismo ocurre con otros tipos de activos, así, por supuesto. No olvide usar <% =%>, <%%> para interpolar el código Ruby allí. No funcionará sin ellos. Durante la precompilación, Sprockets interpolará el código utilizado en los archivos CSS o Sass y volverá a imprimir los archivos .css, con o sin huella digital, según su configuración.

A continuación se presentan algunas opciones más que podrían ser útiles para vincular a varias categorías de activos:

• asset_path
• asset_url
• image_path
• image_url
• audio_path
• audio_url
• font_path
• font_url
• video_path
• video_url

La diferencia entre estos hermanos es que la versión _url le da la ruta completa, como http://example.com/assets/application.css, mientras que la versión _path se traduce en la ruta relativa a un recurso, como /assets/application.css.

Ayudantes de activos Sass

Cuando se utiliza la gema sass-rails, también puede hacer uso de la ruta path y url ayudantes para sus activos. Son un no-brainer realmente. Es tan simple como esto:

some-stylesheet.css.erb

.some-class {
  background-image: asset-path("some-image.png");
}

.some-class {
  background-image: asset-url("some-image.png");
}

.some-class {
  background-image: image-path("some-image.png");
}

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

Observe que estos ayudantes usan un guión (-) y no un guión bajo (_).

image-path("some-image.png") se traduce en "/assets/some-image.png". image-url("some-image.png") se expandirá a url(/assets/some-image.png)—que a su vez se traduce a la URL completa, como "http://www.example.com/assets/some-image.png". Lo mismo ocurre con la ruta de los activos,asset-path, por supuesto.

Curiosamente, esta joya también ofrece su propio sabor de otros ayudantes de activos de Rails. Eso significa que no tienes que usar archivos .erb y hacer <% =%> interpolaciones en tus hojas de estilo. Usted simplemente utiliza estos ayudantes de activos de sass-rails, que se siente un poco más elegante en mi opinión. Además, menos código maloliente.

• asset-path
• asset-url
• image-path
• image-url
• audio-path
• audio-url
• font-path
• font-url
• video-path
• video-url

Estos métodos de ayuda saben exactamente dónde encontrar sus activos, si los coloca en el directorio convencional, el camino de búsqueda básicamente. La diferencia entre path y url es que tienes caminos relativos y un camino absoluto. Un recordatorio rápido: una ruta de acceso relativa es la ruta de acceso a un destino de archivo determinado desde alguna otra ubicación de archivo. Las rutas absolutas le dan la ubicación en referencia al directorio raíz.

Pensamientos finales

El Pipeline de activos se extrajo desde Rails 4 y ya no es una funcionalidad básica. Está habilitado de forma predeterminada, pero ahora Sprockets se encarga de ello. Usted es libre de saltarlo cuando inicia un proyecto.

El uso de la tubería hace que la gestión de activos y la compilación sean muy sencillas. No es necesario configurar nada y puede centrarse sólo en trabajar con estos activos. La cereza en la parte superior es que usted consigue una gran cantidad de métodos prácticos de conveniencia también.

Sus archivos para sus CSS, JS, CoffeeScript, Sass, Haml, Slim, y así sucesivamente están bien organizados en un lugar central, bajo app/assets. Sprockets es responsable de servir archivos desde este directorio. Los archivos de allí por lo general necesitan algún preproceso, como convertir archivos Sass en sus archivos CSS equivalentes.

Por ahora usted sabe la mayor parte de las características de la tubería del activo que los principiantes tienen generalmente un rato complicado que envuelve sus cabezas alrededor. Más importante que saber su funcionalidad solo, ahora está familiarizado con el por qué también. Debe tener un buen conocimiento introductorio de compilación, huellas dactilares, almacenamiento en caché, minificación y compresión. Espero que usted apreciará cuánto esta tubería hace para usted para hacer su vida de desarrollador un poco más libre de problemas.