Cómo usar Imagemin con Grunt

Katie Hempenius
Katie Hempenius
X

Configura el complemento Imagemin Grunt

Este Glitch ya contiene grunt, grunt-cli y grunt-contrib-imagemin . Para agregar la configuración de Imagemin, deberás editar tu gruntfile.js.

  • Haz clic en Remix para editar para que el proyecto se pueda editar.
  • En gruntfile.js, reemplaza el comentario //Add configuration here. por este bloque de código:
imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

Este bloque de código le indica a Grunt qué archivos se deben comprimir con Imagemin.

  • dynamic indica que la lista de archivos para comprimir será de forma dinámica. generado por la coincidencia de los nombres de archivo con el patrón de archivo especificado.

  • El patrón del archivo {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} coincidirá con todas las imágenes JPEG y PNG del directorio images/.

  • Para cargar la tarea Imagemin, agrega esta línea inmediatamente antes grunt.registerTask(...)
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);
  • Por último, reemplaza el comentario /* list plugins here */ por 'imagemin' para agregar Imagemin como la tarea de Grunt predeterminada. Esa línea ahora debería verse de la siguiente manera:
grunt.registerTask('default', ['imagemin']);

✔︎ Registro

El archivo gruntfile.js completo debería verse de la siguiente manera:

const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    dynamic: {
      files: [{
        cwd: 'images/'
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Personaliza la configuración de Imagemin

imagemin-pngquant es un complemento para especificar niveles de calidad de compresión. Ya agregamos imagemin-pngquant a este proyecto en package.json para comprimir tus PNG. Para usarlo, declara el complemento y especifica un nivel de calidad de compresión en tu gruntfile.

  • Para declarar el complemento imagemin-pngquant, agrega esta línea a la parte superior de tu gruntfile.js
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • Agrega una propiedad options a la configuración para comprimir imágenes PNG imagemin. Esa propiedad options debería verse de la siguiente manera:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

Este código le indica a Imagemin que comprima los PNG mediante el complemento Pngquant. El El campo quality usa los rangos de valores min y max para determinar la nivel de compresión: 0 es el más bajo y 1 el más alto. Para forzar todas las imágenes se comprima al 50% de calidad, pasa 0.5 como el valor mínimo y máximo.

✔︎ Registro

Tu archivo gruntfile.js ahora debería verse de la siguiente manera:

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Pero ¿qué pasa con los JPEG? El proyecto también tiene imágenes JPEG, por lo que debes especificar también se comprimen.

Personaliza la configuración de Imagemin (continuación)

Usa el complemento imagemin-mozjpeg, que ya se instaló, para lo siguiente: comprimir imágenes JPEG.

  • Para declarar el complemento imagemin-mozjpeg, coloca esta línea en la parte superior de tu gruntfile.js
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
  • A continuación, agrega mozjpeg({quality: 50}) al array en el objeto options. Ahora, el array debería verse de la siguiente manera:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔︎ Registro

Tu archivo gruntfile.js ahora debería verse de la siguiente manera:

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Corre, Grunt y verificar resultados con Lighthouse

  1. Haz clic en el botón Herramientas.
  2. Luego, haz clic en el botón Consola.
  3. Para ejecutar Grunt, ingresa el siguiente comando en la consola:
grunt

Cuando se complete Grunt, deberías ver un mensaje como este en la consola:

Minified 6 images (saved 667 kB - 66.5%)

¡Hip, hip, hurra! Los resultados son mucho mejores.

Por último, es buena idea usar Lighthouse para verificar los cambios que en la nube. "Codifica imágenes de forma eficiente" de Lighthouse la auditoría de rendimiento te permitirá saber si las imágenes JPEG de tu página están comprimidas de manera óptima.

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa
  • Ejecuta la auditoría de rendimiento de Lighthouse (Lighthouse > Opciones > Rendimiento) ver la versión publicada de tu Glitch y verificar que la sección " imágenes" se aprobó la auditoría.

Pasa "Codifica imágenes de forma eficiente" auditoría en Lighthouse

¡Listo! Usaste Imagemin para comprimir de manera óptima las imágenes en tu página.