画像圧縮に「gulp-imagemin」を使っていたところ、ある日、不可逆圧縮しようとしてエラーに。
メッセージを見ると「imagemin.jpegtran()」が問題のようです。
TypeError: imagemin.jpegtran is not a function
公式ページとコードを見比べたところ、デフォルトのプラグインに「imagemin.jpegtran()」がない!
plugins
Type:
Array
Default:
gulp-imagemin -npm[imagemin.gifsicle(), imagemin.mozjpeg(), imagemin.optipng(), imagemin.svgo()]
バージョンを遡ってみると「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」だけでした。
公式のサンプルをそのまま使うことも多いですが、不要なコードは書かない、がベストですね。
ロスレス圧縮だけでなく、不可逆圧縮をしている方は「imagemin.jpegtran()」 が書かれていないか確認してみてください。