JSPM

  • Created
  • Published
  • Downloads 56
  • Score
    100M100P100Q8960F
  • License MPL-2.0

Neutrino middleware for optimizing images with imagemin

Package Exports

  • @neutrinojs/image-minify

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@neutrinojs/image-minify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Neutrino Image Minify Middleware

@neutrinojs/image-minify is Neutrino middleware for optimizing images with imagemin.

NPM version NPM downloads Join the Neutrino community on Spectrum

Requirements

  • Node.js v6.10+
  • Yarn or npm client
  • Neutrino v8

Installation

@neutrinojs/image-minify can be installed via the Yarn or npm clients.

Yarn

yarn add @neutrinojs/image-minify

npm

npm install --save @neutrinojs/image-minify

Usage

@neutrinojs/image-minify can be consumed from the Neutrino API, middleware, or presets. Require this package and plug it into Neutrino:

// Using function middleware format
const images = require('@neutrinojs/image-loader');
const imagemin = require('@neutrinojs/image-minify');

// Use with default options
neutrino.use(images);
neutrino.use(imagemin);

// Usage showing default options
neutrino.use(imagemin, {
  imagemin: {
    plugins: [
      gifsicle(),
      svgo(),
      pngquant(),
      mozjpeg(),
      webp()
    ]
  },
  plugin: {
    name: '[path][name].[ext]',
    test: /\.(png|jpg|jpeg|gif|webp)$/
  },
  useId: 'imagemin',
  rules: ['svg', 'img'],
  pluginId: 'imagemin',
});
// Using object or array middleware format

// Use with default options
module.exports = {
  use: ['@neutrinojs/image-minify']
};

// Usage showing default options
module.exports = {
  use: [
    ['@neutrinojs/image-minify', {
      imagemin: {},
      plugin: {
        name: '[path][name].[ext]',
        test: /\.(png|jpg|jpeg|gif|webp)$/
      },
      rules: ['svg', 'img'],
      pluginId: 'imagemin'
    }]
  ]
};
  • imagemin: Set options for imagemin.
  • plugin: Set options for imagemin-webpack's ImageminWebpackPlugin.
  • rules: Specify rules for the application of imagemin.
  • pluginId: The imagemin plugin identifier. Override this to add an additional imagemin plugin instance.

Customization

@neutrinojs/image-minify creates some conventions to make overriding the configuration easier once you are ready to make changes.

Rules

The following is a list of rules and their identifiers which can be overridden:

Name Description Environments and Commands
img Optimize JPEG, PNG, GIF, and WEBP files imported from modules. Contains a single loader named imagemin. all
svg Optimize SVG files imported from modules. Contains a single loader named imagemin. all

Plugins

The following is a list of plugins and their identifiers which can be overridden:

Name Description Environments and Commands
imagemin Optimize any images added by other webpack plugins (e.g. copy-webpack-plugin). all

Contributing

This middleware is part of the neutrino-dev repository, a monorepo containing all resources for developing Neutrino and its core presets and middleware. Follow the contributing guide for details.