Spanish (Español) translation by Elías Nicolás (you can also view the original English article)
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="https://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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post