grunt imageoptim

Make ImageOptim, ImageAlpha and JPEGmini part of your automated build process

481
18
JavaScript

grunt-imageoptim

The companion Grunt plugin for
ImageOptim-CLI, which automates
batch optimisation of images with ImageOptim,
ImageAlpha and
JPEGmini for Mac.

NPM version
NPM downloads
Dependency Status
Follow JamieMason on GitHub
Follow fold_left on Twitter

๐ŸŒฉ Installation

npm install grunt-imageoptim --save-dev

๐Ÿ”— Dependencies

Since this project automates three Mac Applications, you will need them to be
installed on your machine for us to be able to reach them.

A local copy of ImageOptim-CLI
will be installed, you wonโ€™t need to install that separately.

โš–๏ธ Configuration

As with all Grunt plugins, grunt-imageoptim is configured using a Gruntfile.js
in the root of your project.

Grunt provide a short
walkthrough of a sample Gruntfile which
explains how they work, but the general structure is this;

module.exports = function(grunt) {
  grunt.initConfig({
    /* your grunt-imageoptim configuration goes here */
  });
  grunt.loadNpmTasks("grunt-imageoptim");
};

Use defaults

Here we want to optimise two directories using default options.

imageoptim: {
  myTask: {
    src: ["www/images", "css/images"];
  }
}

Override defaults

Here we want to optimise two directories using only ImageAlpha and ImageOptim,
then close them once weโ€™re done.

imageoptim: {
  myTask: {
    options: {
      jpegMini: false,
      imageAlpha: true,
      quitAfter: true
    },
    src: ['www/images', 'css/images']
  }
}

Custom options for each task

Here we have a task for a folder of PNGs and another for JPGs. Since we use
ImageAlpha to optimise PNGs but not JPGs and vice versa with JPEGmini, here we
toggle their availability between the two tasks.

imageoptim: {
  myPngs: {
    options: {
      jpegMini: false,
      imageAlpha: true,
      quitAfter: true
    },
    src: ['img/png']
  },
  myJpgs: {
    options: {
      jpegMini: true,
      imageAlpha: false,
      quitAfter: true
    },
    src: ['img/jpg']
  }
}

Option inheritance

This example is equivalent to the custom options for each task example, except
weโ€™re setting some base options then overriding those we want to change within
each task.

imageoptim: {
  options: {
    quitAfter: true
  },
  allPngs: {
    options: {
      imageAlpha: true,
      jpegMini: false
    },
    src: ['img/png']
  },
  allJpgs: {
    options: {
      imageAlpha: false,
      jpegMini: true
    },
    src: ['img/jpg']
  }
}

โš–๏ธ Configuration

All options can be either true or false and default to false.

  • quitAfter Whether to exit each application after weโ€™re finished optimising
    your images.
  • jpegMini Whether to process your images using a copy of
    JPEGmini.app installed
    on your Mac.
  • imageAlpha Whether to process your images using a copy of
    ImageAlpha.app installed on your Mac.

๐Ÿ™‹๐Ÿพโ€โ™€๏ธ Getting Help