gulp imageminでの画像圧縮

Question

環境構築で手こずっております。
https://blog.triana.jp/?p=1338#Scss
こちらのサイトでgulp-imageminを実行したのですが、
同階層に作ったimgフォルダに圧縮された画像が入ってなく、
画像の圧縮ができない状態です。

コマンドでは、npx gulpと入力後、

[20:13:08] Using gulpfile ~\Desktop\TEST\gulpfile.js
[20:13:08] Starting 'default'...
[20:13:08] Starting 'watch-scss'...
[20:13:08] Starting 'watch-babel'...
[20:13:08] Starting 'autopre'...
[20:13:08] Starting 'watch-imagemin'...
しっかりこのように表記されています。

サイトではそのまま以下のコードをコピペして
[npx gulp]で画像が圧縮されるようなニュアンスで書いてあったのですが、
どうすれば解決しますでしょうか。
パスの間違いでしょうか？

どうかお知恵の方を貸していただけますか。

const imagemin = require("gulp-imagemin");
const pngquant = require("imagemin-pngquant");
const mozjpeg = require("imagemin-mozjpeg");
const changed = require("gulp-changed");
const notify = require("gulp-notify");

gulp.task("images", () => {
  return gulp
    .src("./src/img" + "/**/*.{png,jpg,gif}")
    .pipe(changed("./img")) // src/imgフォルダの中身と、出力先のimgフォルダの中身を比較して異なるものだけ処理(新しく追加されたファイル等)
    .pipe(
      imagemin([
        pngquant([
          "65-80", // 画質 0-100まで幅を持って指定可能。
          1,
          0
        ]),
        mozjpeg({
          quality: 85, // 画質 こちらも0から100まで指定できるが、pngquantと違って65-80のように幅を持って指定はできない。1つの数字のみ。
          progressive: true // baselineとprogressiveがある。baselineよりprogressiveのほうがエンコードは遅いが圧縮率は高い。
        }),
        imagemin.svgo(),
        imagemin.optipng(),
        imagemin.gifsicle()
      ])
    )
    .pipe(gulp.dest("./img")); // imgファイルに保存(出力)
});

gulp.task("watch-imagemin", function() {
  gulp.watch("./src/img" + "/**/*", gulp.series("images"));
});

gulp.task(
  "default",
  gulp.parallel("watch-scss", "watch-babel", "autopre", "watch-imagemin")
);

Answer 1

＞試してみましたが、エラーが出てしまいました。

すみません。回答を省略して書いてました。紛らわしかったですね。
gulp.watch()が正解です。

ちなみに私もgulpで画像を監視して圧縮しています。
こんな風にしてます。

// 入力元のjpg/pngファイルを監視、変更があると圧縮コピータスク(comp_images)を実行
const watch_images = function () {
    watch('./images/**/*.{png,jpg}', {cwd: './source'}, comp_images);
}

ちなみにgulp4からgulp.task()は非推奨になったので使っていません。
普通にjavascriptのfunctionで書いています。

Comments

[pr_777]

ご回答頂いたところ申し訳ありません。

元々、記述していたコードで動作していたようです。
というのも、imgフォルダ自体になんらかの変更が入ったときに、新たに圧縮された画像が生成されるということを理解していなかったためでした。
（※npx コマンド実行した瞬間に圧縮画像が生成されると思っていました。）

ご教授頂いた内容は新たな知恵として是非参考にさせていただきます。

Answer 2

gulp.watch("./src/img" + "/**/*", gulp.series("images"));

画像ファイルの変更を監視するのですから、
watch('./src/img' + '/**/*.{png,jpg,gif}',
ではないですか？

Comments

[pr_777]

gulp.watch("./src/img" + "/**/*", gulp.series("images"));
から
watch('./src/img' + '/**/*.{png,jpg,gif}',
に記述を変えればいいのでしょうか？

試してみましたが、エラーがが出てしまいました。、