【 更新 】おすすめ記事はこちら

Gulp

「gulp-imagemin」でエラー！不可逆圧縮はjpegtranを新しいコードに

画像圧縮に「gulp-imagemin」を使っていたところ、ある日、不可逆圧縮しようとしてエラーに。

メッセージを見ると「imagemin.jpegtran()」が問題のようです。

TypeError: imagemin.jpegtran is not a function

公式ページとコードを見比べたところ、デフォルトのプラグインに「imagemin.jpegtran()」がない！

plugins

Type: Array

Default: [imagemin.gifsicle(), imagemin.mozjpeg(), imagemin.optipng(), imagemin.svgo()]

gulp-imagemin -npm

バージョンを遡ってみると「6.2.0」までは使われていましたが、「7.0.0」へのメジャーアップデートでは削除されていました。

現在は「imagemin.mozjpeg()」がデフォルトに加わっているので、こちらに変更すれば解決です。

普段から「imagemin-mozjpeg」でJPEGを圧縮していたものの、デフォルトを全てコピー&ペーストしていたことで古いコードが残り、エラーにつながっていたようです。要注意！

開発環境

バージョン

各バージョンは以下の通りです。

$ node -v
v14.17.4

$ npm -v
6.14.14

$ gulp -v
CLI version: 2.3.0
Local version: 4.0.2

ディレクトリ

ディレクトリ構成は以下の通りです。

├─dist
│  └─images
├─node_modules
│ 
└─src
   └─images

「./src/images」にサンプル用の画像を入れておきます。

image.jpg

package.json

package.jsonの内容は以下の通りです。必要箇所のみ抜粋しています。

  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-imagemin": "^7.1.0",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.2"
  }

gulpfile.js

gulpfile.jsの内容は以下の通りです。「imageminPngquant()」と「imageminMozjpeg()」の値は参考用になります。

const { src, dest, watch, series, parallel } = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminPngquant = require('imagemin-pngquant');
const imageminMozjpeg = require('imagemin-mozjpeg');

const imageminOption = [
    imageminPngquant({ quality: [.65, .80] }),　//任意で追加
    imageminMozjpeg({ quality: 80 }),　//デフォルト（新）
    imagemin.gifsicle(),　//デフォルト
    imagemin.optipng(),　//デフォルト
    imagemin.jpegtran(),　//ここを削除する
    imagemin.svgo()　//デフォルト
];

const imgImagemin = () => {
    return src('./src/images/*')
        .pipe(imagemin(imageminOption))
        .pipe(dest('./dist/images'));
};

exports.default = series(imgImagemin);

Gulp4から「gulp.task()」が非推奨のため、タスク定義に使用していません。

プラグインをインストール

当記事の開発環境と同じにする場合は、プラグインを3つインストールしてください。

npm i -D gulp-imagemin imagemin-pngquant imagemin-mozjpeg

gulpfile.jsのコードを変更

以下のコードが「gulpfile.js」にあれば削除します。今回初めて設定する場合は、書かないように気をつけてください。

imagemin.jpegtran()

つづいて、以下のコードを追加します。

imagemin.mozjpeg()

gulpfile.jsの完成コード

冒頭の開発環境「gulpfile.js」から「imagemin.jpegtran()」を消しています。

const { src, dest, watch, series, parallel } = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminPngquant = require('imagemin-pngquant');
const imageminMozjpeg = require('imagemin-mozjpeg');

const imageminOption = [
    imageminPngquant({ quality: [.65, .80] }),
    imageminMozjpeg({ quality: 80 }),
    imagemin.gifsicle(),
    imagemin.optipng(),
    imagemin.svgo()
];

const imgImagemin = () => {
    return src('./src/images/*')
        .pipe(imagemin(imageminOption))
        .pipe(dest('./dist/images'));
};

exports.default = series(imgImagemin);

Gulp4から「gulp.task()」が非推奨のため、タスク定義に使用していません。

コマンドで確認

コードを実行して「src」ディレクトリに出力されていればOKです。

npx gulp

おわりに

Gulp4からのユーザーですが、バージョンアップで今まで通り使えなくなったのは幸い「gulp-sass」だけでした。

関連記事「gulp-sass 5」でコンパイルエラー！プラグインとコードを再設定する

公式のサンプルをそのまま使うことも多いですが、不要なコードは書かない、がベストですね。

ロスレス圧縮だけでなく、不可逆圧縮をしている方は「imagemin.jpegtran()」 が書かれていないか確認してみてください。