gulpで画像圧縮をする際に生じたエラーの解消

Question

前提・実現したいこと

静的HTMLサイトを作成しています。
作業効率を高めるためにgulpを触ってみましたが、画像圧縮がどうも上手くいかず困っています。

https://haniwaman.com/gulp/#i-3
上記の記事を参考にgulp imageminのコマンドを入力したところ、次のエラーが発生しました。

発生している問題・エラーメッセージ

  imagemin.jpegtran(),
           ^
TypeError: imagemin.jpegtran is not a function

該当のソースコード

var gulp = require('gulp');
var imagemin = require("gulp-imagemin");
var imageminPngquant = require("imagemin-pngquant");
var imageminMozjpeg = require("imagemin-mozjpeg");
var imageminOption = [
  imageminPngquant({ quality: '65-80' }),
  imageminMozjpeg({ quality: 85 }),
  imagemin.gifsicle({
    interlaced: false,
    optimizationLevel: 1,
    colors: 256
  }),
  imagemin.jpegtran(),
  imagemin.optipng(),
  imagemin.svgo()
];

gulp.task( 'imagemin', function() {
  return gulp
    .src( './img/*.{png,jpg,gif,svg}' )
    .pipe( imagemin( imageminOption ) )
    .pipe( gulp.dest( './img/min' ) );
});

質問内容

上記のエラーを解消する方法をご存知でしたら教えて頂きたいです。

gulpを触って数日のひよっこなので至らない点が多々あると思いますが、どうか宜しくお願い致します。

補足情報

OS Windows10
エディター　VSCode
gulpのバージョン 4.0.2

Answer 1

gulp-imageminのバージョンは7以上でしょうか？

v7.0.0から、デフォルトのプラグインがjpegtranから、mozjpegに置き換わったそうなので、

imagemin.jpegtran()

gulpfile.jsの上記の箇所を

imagemin.mozjpeg()

に変更すると通ると思います。

（参照）
https://www.tenagazaru.net/gulp-imagemin-v7-function
https://github.com/sindresorhus/gulp-imagemin/releases

Comments

[gyanty]

横ですが、質問主さまと同様の現象で悩んでました。
（gulp-imageminのバージョンは7.1.0）

仰るように、gulpfile.jsの記述を

imagemin.jpegtran()

↓

imagemin.mozjpeg()

に変更したところ、正常動作を確認することが出来ました。
ありがとうございます。

[murakami_shushu]

tenagazaru様
ご指摘いただき誠にありがとうございました。

gulpfile.jsの記述を変更すると、また新たなエラーが生じました。
このエラーはimagemin-pngquant v7.0.0からoptionの仕様が変わったことで起きた不具合のようでした。
こちらのサイトを参考にすることでエラーは解消されました。

▼参考サイト
https://qiita.com/hibikikudo/items/2c82119ac5acf9cb3394

このエラーを解消すると、無事に画像の圧縮が行えました。
丁寧にご説明して下さってありがとうございました。

gyanty様も疑問が解消されたようで良かったです。

Answer 2

gulp のバージョンを、3.9.1 にする必要があるようです。gulp 4.0.0 から、大幅にインターフェースが変更されて、古いプログラムは動かなくなりました。

npm uninstall gulp -g
npm uninstall gulp
npm install gulp@3.9.1
npm install gulp@3.9.1 -g

Comments

[murakami_shushu]

早速のご回答ありがとうございます。
gulpのバージョンを落として再度コマンドを入力しましたが、発生するエラーに変化はありませんでした。

念のためバージョンの確認も行いました。
gulp -v
[11:14:29] CLI version 3.9.1
[11:14:29] Local version 3.9.1

他に気になる点がございましたらお申し付けください。

[mmaeda]

多分パッケージのバージョンが、合ってないのでしょう。
https://github.com/haniwaman/template0/blob/master/package.json を使ってますか？

[murakami_shushu]

パーッケージを上記のものに変更して再度挑戦しましたが、またもや上手くいくませんでした。

私のgulpやパッケージに対する知識が圧倒的に不足しているのが現状ですので、もう少し勉強してから原因を探りたいと思います。
丁寧にご教授して下さって本当にありがとうございます。

[mmaeda]

パッケージのバージョンは日々更新されるため、今日動いたプログラムも、次の日パッケージ参照を更新したら動かないこともあります。パッケージのメインテナンスがうまくされているものは、問題が起こらないのですが。なんとか動作するプログラムの状態を探しあてて、そこから自分の必要なプログラムを作成する必要があります。GitHub からすべてのソフトウェアのコピーを行ってそこから始めるのも手です。もし動かない場合は、GitHub repository のオーナーに問い合わせる必要もあります