Usemin

Usemin es un plugin de grunt que reemplaza en los archivos HTML referencias a scripts y hojas de estilo no optimizadas por su versión optimizada.

Usemin se compone de 2 tareas (useminPrepare y usemin).

• useminPrepare: detecta bloques especiales en los HTML y actualiza la configuración de grunt para ejecutar concat/uglify/cssmin/requirejs en los archivos referenciados en el bloque.
• usemin: Reemplaza cada bloque por una referencia a un único archivo, así como todas las referencias a imágenes, scripts, CSS, por su versión minimizada/versionada/.. si la encuentra.

Normalmente, useminPrepare se lanza primero, luego se lanzan las tareas concat, uglify, cssmin y requirejs, y por último usemin.

La tarea useminPrepare

Se inteactúa con la tarea mediante la creación de bloques comentados de HTML. Estos bloques cumplen con el siguiente patrón:

<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

• type: o bien js o bien css
• alternate search path: (optional) Por defecto las rutas de los archivos de entrada son relativas al archivo tratado. Este comportamiento se cambia mediante Alternate search path
• path: La ruta del archivo optimizado, la salida objetivo

A continuación se muestra un ejemplo:

<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->

La tarea lee el HTML y encuentra dichos bloques para configurar las tareas concat / uglify (type=js), o concat / cssmin (type=css).

La tarea también puede manejar el uso de RequireJS, usando el atributo "data-main" como se muestra a continuación:

<!-- build:js js/app.min.js -->
<script data-main="js/main" src="js/vendor/require.js"></script>
<!-- endbuild -->

Así ya no tendremos que configurar concat/uglify/cssmin o RequireJS.

Solo necesitamos configurar un objetivo: html, con la lista de archivos a procesar. Un ejemplo de Gruntfile.js:

'useminPrepare': {
  html: 'index.html'
}

Opciones

uglify

Tipo: 'string' Valor por defecto: 'uglify'

Nombre de la herramienta usada para minimizar el Javascript

cssmin

Tipo: 'string' Valor por defecto: 'cssmin'

Nombre de la herramienta usada para minimizar el CSS

dest

Tipo: 'string' Valor por defecto: nil

Directorio base donde se generarán los archivos de salida.

La tarea usemin

Es la responsable de reemplazar en los HTML y CSS, cada bloque por una referencia a un único archivo, así como todas las referencias a imágenes, scripts, CSS, por su versión minimizada/versionada/.. si la encuentra.

usemin: {
  html: ['**/*.html'],
  css: ['**/*.css'],
  options: {
    dirs: ['temp', 'dist']
  }
}

dirs

Tipo: 'array of strings' Valor por defecto: nil

Limita los directorios donde se buscarán los archivos de salida. Por defecto buscará en todos los subdirectorios.

basedir

Tipo: 'string' Valor por defecto: nil

Modifica el directorio base del archivo de salida. Por ejemplo:

|
+--- styles
    \ main.css
+--- views
    \ index.html

Por defecto si el archivo a transformar es index.html, las imágenes, scripts, ... referenciados en este archivo se considerarán residentes en el directorio views, aunque deberían buscarse en el directorio styles.

Ejercicio

0. Mira en Gruntfile.js qué archivos se modificarán mediante usemin
1. Mira en index.html los comentarios de usemin e intenta predecir el output
2. Ejecuta grunt y compreueba el resultado en el directorio dist