Asset pipeline

Para probar asset-pipeline hay que generar el war y después ejecutar la app:

grails -Dgrails.env=prod
grails run-war

Por automático en modo producción:

• Minifica todos los archivos .js, .css. En grails no es necesario incluir los archivos .min.js de las librerías ya que por automático las minifica.
• Concatena todos los archivos de un manifiesto en un único archivo.
• Despacha los recursos estáticos comprimidos (gzip).
• Agrega cabeceras http a cada recurso para que sea cacheado (cache-digest).
• Con ayuda de otros plugins compila archivos .less, .sass, coffescript, clojurescript.

Organización de folders

El primer nivel del folder assets (assets/images, assets/stylesheets, assets/javascripts, assets/myjsplugins, etc.) es utilizado para propósitos de ORGANIZACIÓN y es omitido. Puede contener folders con cualquier nombre y no es necesario que se acomoden los archivos por tipo, es decir que los archivos .js vayan en javascripts o que los archivos .css en stylesheets.

Por lo tanto, para hacer referencia a un archivo se debe omitir su folder de primer nivel, esto aplica en todos los lugares donde se haga referencia (tags, directivas de procesamiento, paths relativos).

Linkeando los assets en las vistas

<asset:javascript src="application.js"/>: Incluye el archivo assets/*/application.js

<asset:stylesheet href="application.css"/>: Incluye el archivo assets/*/application.css

<asset:image src="datatables/delete.png"/>: Incluye el archivo assets/*/datatables/delete.png

<link href="${assetPath(src: 'manifest.json')}"/>: Incluye el archivo `assets/*/manifest.json``

Cuando se trate de archivos estáticos, utilice assetPath en vez de createLink ya que todos los tags del prefijo asset obtendrán la versión cacheada del recurso estático.

Ejemplo: <link href="${assetPath(src: 'manifest.json')}"/>

Para las imágenes utilice siempre <asset:image> de tal forma que obtenga la imagen cacheada.

Se hace referencia a un archivo, siempre se hará por la ruta relativa.

Dentro de los archivos css basta con poner la ruta relativa de la imagen y asset pipeline la remplazará por su versión cacheada.

Development:

div.withimage {
    background-image: url('../images/calendario.png');
}

Production:

div.withimage {background-image: url('calendario-77dceafdd39876677443279d2a691cc9.png');}

Manifiestos

Sirven para agrupar un conjunto de archivos js o css los cuales se agrupan en un solo archivo en modo producción por lo que se reduce el número de peticiones al servidor.

Cualquier archivo js o css se puede hacer un manifiesto incluyendo directivas de procesamiento.

Si no se crea un manifiesto y se importa un archivo .js, lo minificará, comprimirá, despachará cacheado pero no creará un bundle.

Cuando todos los archivos están dentro de un manifiesto, asset pipeline evita librerías/css duplicados. Si los archivos no se encuentran en un manifiesto, o se importan 2 manifiestos diferentes, asset pipeline no es capaz de evitar librerías/css duplicados.

Directivas

Las directivas indica qué archivos incluir y en qué orden. Las directivas se pueden escribir en cualquier archivo js, css, coffescript.

require jquery: incluye el archivo jquery.js en el manifest.

require_tree views: incluye recursivamente todos los archivos y subdirectorios del directorio assets/*/views.

require_self: Incluye el cuerpo del manifiesto.

require_full_tree: Incluye todos los archivos de todos los plugins que contengan el path.

Ejemplos:

*= require bootstrap: Comentario en un css, agrega el archivo: grails-app/assets/*/bootstrap.css

//= require bootstrap: Comentario en un js, agrega el archivo: grails-app/assets/*/bootstrap.js

Plugins

Los archivos de la aplicación tienen preferencia contra los archivos de los plugins, esto permite hacer remplazo de los recursos utilizados en los plugins dentro de las aplicaciones.

En los plugins la carpeta grails-app/assets y web-app son tratadas igual.

Recursos

http://www.asset-pipeline.com/manual/