ember-cli-imagemin lossyPNG ImageMin.pngquant не является функцией

Question

Я пытаюсь включить свойство lossyPNG в дополнении ember-cli-imagmin, чтобы создать небольшой размер файла для моих.pngs. Мой EmberApp в ember-cli-build.js включает imagemin примерно так:

imagemin: {
  interlaced: true,
  optimizationLevel: 3,
  progressive: true,
  lossyPNG: true,
  pngquant: {
    speed: 1,
    quality: 80
  }
}

Объект зависимостей в моем package.json включает в себя:

{ ...
  "ember-cli-imagemin": "0.4.0",
  "imagemin": "3.2.2",
  "imagemin-pngquant": "4.2.2",
  ...
}

Однако всякий раз, когда я запускаю ember build, я получаю следующую ошибку:

The Broccoli Plugin: [object Object] failed with:
TypeError: ImageMin.pngquant is not a function

Эта ошибка указывает мне на эту строку в broccoli-imagemin. Если в ember-cli-build.js установить для lossyPNG значение false, то я не получу никаких ошибок, но мои pngs могут быть дополнительно оптимизированы на основе результатов pagepeed. Чего мне не хватает, чтобы использовать pngquant для дальнейшей оптимизации моих изображений png?

Answer 1

Брокколи-imagemin, от которого зависит ember-cli-imagemin, является проблемой. Поскольку он не обновлялся с ноября 2014 года, он использует более старую версию imagemin, но спецификация package.json допускает imagemin v3.x. pngquant был удален как свойство по умолчанию в imagemin v3.2.0. Так что, если вы форсируете установку imagemin v3.1.0 в вашем package.json, он должен работать.

Если вы хотите использовать более свежую версию imagemin, посмотрите на этот PR. Я бы попробовал использовать эту ветку напрямую. Вы можете установить эту ветку прямо из репозитория с помощью:

ember install https://github.com/kanongil/ember-cli-imagemin.git#v5-imagemin

Эта ветка изменяет работу imagemin. Вместо того, чтобы передавать параметры, похоже, что вы просто передаете плагины, которые хотите использовать, и передаете их параметры непосредственно им.

var app = new EmberApp({
  imagemin: {
    plugins: [
      require('imagemin-jpegtran')({ progressive: true }),
      require('imagemin-pngquant')({speed: 1, quality: 80}),
      require('imagemin-svgo')()
    ]
  }
});