nuxt-community / imagemin-module Goto Github PK

View Code? Open in Web Editor NEW

50.0 8.0 1.0 261 KB

Automatically optimize (compress) all images used in Nuxt.js

License: MIT License

JavaScript 4.84% Vue 2.45% TypeScript 92.71%

nuxt vuejs nuxt-module imagemin image-processing image-optimization image images

imagemin-module's Introduction

@nuxtjs/imagemin

Automatically optimize (compress) all images used in Nuxt.js

📖 Release Notes

Setup

Add @nuxtjs/imagemin dependency to your project

yarn add --dev @nuxtjs/imagemin # or npm install --save-dev @nuxtjs/imagemin

Add @nuxtjs/imagemin to the buildModules section of nuxt.config.js

export default {
  buildModules: [
    // Simple usage
    '@nuxtjs/imagemin',

    // With options
    ['@nuxtjs/imagemin', { /* module options */ }]
  ]
}

⚠️ If you are using Nuxt < v2.9 you have to install the module as a dependency (No --dev or --save-dev flags) and use modules section in nuxt.config.js instead of buildModules.

Using top level options

export default {
  buildModules: [
    '@nuxtjs/imagemin'
  ],
  imagemin: {
    /* module options */
  }
}

Options

See image-minimizer-webpack-plugin for the complete list of options available.

`enableInDev`

Type: Boolean
Default: false

Images will be minified in development mode, if this option is set to true.

This could increase the build time.

`minimizerOptions`

Type: Object
Default:

plugins: [
  ['gifsicle', { interlaced: true }],
  ['jpegtran', { progressive: true }],
  ['optipng', { optimizationLevel: 5 }],
  ['svgo', { plugins: [{ removeViewBox: false }] }]
]

Development

Clone this repository
Install dependencies using yarn install or npm install
Start development server using npm run dev

License

MIT License

imagemin-module's People

Contributors

Stargazers

Watchers

Forkers

gmartigny

imagemin-module's Issues

error installing

Getting the following error when trying to install

node: 10.19.0
npm: 6.14.5
nuxt: 2.14.0

> [email protected] postinstall /project/node_modules/gifsicle
> node lib/install.js

  ⚠ Response code 404 (Not Found)
  ⚠ gifsicle pre-build test failed
  ℹ compiling from source
  ✖ Error: Command failed: /bin/sh -c autoreconf -ivf
/bin/sh: 1: autoreconf: not found


    at Promise.all.then.arr (/home/project/node_modules/bin-build/node_modules/execa/index.js:231:11)
    at process._tickCallback (internal/process/next_tick.js:68:7)
npm WARN [email protected] requires a peer of eslint@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/@babel/cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node lib/install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ethan/.npm/_logs/2020-08-24T14_09_51_123Z-debug.log

Using webp still doesn't work

Hi @mickaelchanrion
Sorry for delay response

You can configure it like this:

export default {
  buildModules: [

    // gif,jpb,png,svg
    ['@nuxtjs/imagemin', {
      imageminOptions: {
        plugins: [
          ['gifsicle', { interlaced: true }],
          ['jpegtran', { progressive: true }],
          ['optipng', { optimizationLevel: 5 }],
          ['svgo', { plugins: [{ removeViewBox: false }] }]
        ]
      }
    }],

    // webp
    // https://www.npmjs.com/package/imagemin-webpack#name
    ['@nuxtjs/imagemin', {
      imageminOptions: {
        name: '[path][name].webp',
        plugins: [
          ['webp', { resize: { width: 1280, height: 800 } }]
        ]
      }
    }]
  ]
}

Originally posted by @ricardogobbosouza in #21 (comment)

Hello. If you do everything as you wrote, then with the command "nuxt build" I get an error:

Nuxt Fatal Error
ValidationError: Invalid options object.
Image Minimizer Plugin has been initialized using an options object that does not match the API schema.
- options has an unknown property 'imageminOptions'. These properties are valid:
object { test?, include?, exclude?, minimizerOptions?, cache?, filter?, severityError?, loader?, maxConcurrency?, filename?, deleteOriginalAssets? }

Error in Plugin name should be specified

but i'm only using
'@nuxtjs/imagemin'

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

chore(deps): update actions/cache action to v4
chore(deps): update actions/checkout action to v4
chore(deps): update actions/setup-node action to v4
chore(deps): update codecov/codecov-action action to v4
chore(deps): update dependency consola to v3
Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/setup-node v2

actions/checkout v2

actions/cache v2

codecov/codecov-action v2

npm

package.json

consola ^2.15.3

imagemin-gifsicle ^7.0.0

imagemin-jpegtran ^7.0.0

imagemin-mozjpeg ^9.0.0

imagemin-optipng ^8.0.0

imagemin-pngquant ^9.0.2

imagemin-svgo ^9.0.0

Check this box to trigger a request for Renovate to run again on this repository

Use imagemin-webp

Hey,
I'm trying to use imagemin-webp to transform all my images in webp format.

By using this config in nuxt.config.js

imagemin: {
  enableInDev: true, // debuging
  imageminOptions: {
    plugins: [
      ['gifsicle', { interlaced: true }],
      ['jpegtran', { progressive: true }],
      ['optipng', { optimizationLevel: 5 }],
      ['svgo', { plugins: [{ removeViewBox: false }] }],
      ['webp', { resize: { width: 1280, height: 800 } }],
    ],
  },
},

I get my images resized to 1280*800 but the image keeps its extension. How can I fix that? 🤔

Thanks for your help

Cannot override the default `minimizerOptions.plugins`, I can only add new plugins

I was trying to override the default plugins in my project like so from nuxt.config.js;

[...]
imagemin: {
  mimizerOptions: {
    plugins: [
      [ 'gifsicle', { interlaced: false} ],
      [ 'jpegtran', { progressive: false} ],
      [ 'optipng', { optimizationLevel: 9 } ],
    ]
  }
}

However, I was having issues with these changes not applying and it appears to be the case that custom imagemin plugins are getting pushed to the defaults, instead of overriding them. I was able to verify this by adding the following debug code in dist/module.js line 103 (right after defining the options)

const util = require('util')
console.log(util.inspect(options, false, null, true /* enable colors */))

Given the config from my project, this debug code outputs the following;

  minimizerOptions: {
    plugins: [
      [ 'gifsicle', { interlaced: true } ],
      [ 'jpegtran', { progressive: true } ],
      [ 'optipng', { optimizationLevel: 5 } ],
      [
        'svgo',
        { plugins: [ { removeViewBox: false } ] }
      ],
      [ 'gifsicle', { interlaced: false} ],
      [ 'jpegtran', { progressive: false} ],
      [ 'optipng', { optimizationLevel: 9 } ],

I would expect that I would be able to override or remove the default plugins and their options, but as it stands, it only appears I can add new ones? Or if I'm missing something here please let me know where I went wrong :)