gulpで画像が自動で圧縮されない。

Question

前提・実現したいこと

gulpで画像圧縮をする際に、srcフォルダの中のimagesフォルダに画像を入れた時に、自動で画像圧縮するように設定したいです。

現状、srcフォルダの直下に画像ファイルを入れた場合は自動圧縮されます。

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

srcフォルダの中にあるimagesフォルダの中に画像を追加しましたが、画像圧縮されません。

（「1.jpg」の画像ファイルは自動圧縮されましたが、「2.jpg」の画像ファイルが自動圧縮されません。）

該当のソースコード

gulpfile.jsのコード

// パッケージの読み込み
const gulp = require("gulp");
const imagemin = require("gulp-imagemin");
const pngquant = require("imagemin-pngquant");

function minifyImage() {
    return (
        gulp
            // 圧縮前の画像を入れるフォルダを指定
            .src("src/*.{png,jpg,jpeg,gif,svg}")
            // 圧縮率などを設定
            .pipe(
                imagemin([
                    imagemin.mozjpeg({ quality: 80 }),
                    imagemin.svgo({
                        plugins: [{ removeViewBox: true }, { cleanupIDs: false }],
                    }),
                    imagemin.gifsicle({
                        interlaced: true,
                    }),
                    pngquant({
                        quality: [0.65, 0.8],
                        speed: 1,
                    }),
                ])
            )
            // 圧縮後の画像を出力するフルダを指定
            .pipe(gulp.dest("dist"))
    );
}

// srcフォルダを監視
function watchFile() {
    gulp.watch("src/*.{png,jpg,jpeg,gif,svg}", minifyImage);
}

// gulpコマンドで実行できるように設定
exports.default = watchFile;

試したこと

以下のように「src/images*」と画像ファイルのディレクトリを合わせましたが、imagesファイルに入った画像が自動圧縮されませんでした。

コードで画像ファイルの階層を合わせてあげればimagesファイルに画像を入れても自動圧縮されるかなと仮説立てています。

// パッケージの読み込み
const gulp = require("gulp");
const imagemin = require("gulp-imagemin");
const pngquant = require("imagemin-pngquant");

function minifyImage() {
    return (
        gulp
            // 圧縮前の画像を入れるフォルダを指定
            .src("src/images/*.{png,jpg,jpeg,gif,svg}")
            // 圧縮率などを設定
            .pipe(
                imagemin([
                    imagemin.mozjpeg({ quality: 80 }),
                    imagemin.svgo({
                        plugins: [{ removeViewBox: true }, { cleanupIDs: false }],
                    }),
                    imagemin.gifsicle({
                        interlaced: true,
                    }),
                    pngquant({
                        quality: [0.65, 0.8],
                        speed: 1,
                    }),
                ])
            )
            // 圧縮後の画像を出力するフルダを指定
            .pipe(gulp.dest("dist"))
    );
}

// srcフォルダを監視
function watchFile() {
    gulp.watch("src/images*.{png,jpg,jpeg,gif,svg}", minifyImage);
}

// gulpコマンドで実行できるように設定
exports.default = watchFile;

補足情報（FW/ツールのバージョンなど）

macbookpro13インチ

Answer 1

これでどうでしょうか？

.src("src/**/*.{png,jpg,jpeg,gif,svg}", {base: "src"})