Gulpのsvgを読み込む際のエラーについて

Question

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

gulpを導入して間もないのですが、imgフォルダの中にsvg画像を一緒に入れているのですが、ターミナルでエラーが発生してググっても解決できない状況です。
imgフォルダとは別にsvgフォルダを作成してそこから読み込ませるようにすれば良いのでしょうか？
いろいろググっても直接的に解決できるような内容がなくて考えても先に進めずなので質問させていただきました。
知っている方いたらお力添えお願い致します。

[11:44:24] 'imgImagemin' errored after 35 ms
[11:44:24] Error in plugin "gulp-imagemin"
Message:
    Plugin name should be specified

gulpfile.js

const gulp = require('gulp');
const del = require('del');

//scss
const sass = require('gulp-dart-sass'); //Dart Sass はSass公式が推奨 @use構文などが使える
const plumber = require("gulp-plumber"); // エラーが発生しても強制終了させない
const notify = require("gulp-notify"); // エラー発生時のアラート出力
const browserSync = require("browser-sync"); //ブラウザリロード
const autoprefixer = require('gulp-autoprefixer'); //ベンダープレフィックス自動付与
const postcss = require("gulp-postcss"); //css-mqpackerを使うために必要
const mqpacker = require('css-mqpacker'); //メディアクエリをまとめる
const merge = require('merge-stream')


//画像圧縮
const imagemin = require("gulp-imagemin");
const imageminMozjpeg = require("imagemin-mozjpeg");
const imageminPngquant = require("imagemin-pngquant");
const imageminSvgo = require("imagemin-svgo");


// 入出力するフォルダを指定
const srcBase = './_static/src';
const distBase = './_static/dist';


const srcPath = {
  'scss': srcBase + '/scss/**/*.scss',
  'html': srcBase + '/**/*.html',
  'img': srcBase + '/img/**/*',
  'svg': srcBase + '/svg/**/*.svg',
  'js': srcBase + '/js/**/*.js',
  'php': srcBase + '/**/*.php',
  'font': srcBase + '/font/**/*',
};

const distPath = {
  'css': distBase + '/css/',
  'html': distBase + '/',
  'img': distBase + '/img/',
  'svg': distBase + '/svg/',
  'js': distBase + '/js/',
  'php': distBase + '/',
  'font': distBase + '/font/',
};


/**
 * clean
 */
const clean = () => {
  return del(distBase + '/**');
}

//ベンダープレフィックスを付与する条件
const TARGET_BROWSERS = [
  'last 2 versions', //各ブラウザの2世代前までのバージョンを担保
  'ie >= 11' //IE11を担保
];

/**
 * sass
 *
 */

const cssSass = () => {
  return gulp.src(srcPath.scss, {
      sourcemaps: true
  })
    .pipe(
      //エラーが出ても処理を止めない
      plumber({
        errorHandler: notify.onError('Error:<%= error.message %>')
      }))
    .pipe(sass({
      outputStyle: 'expanded'
    })) //指定できるキー expanded compressed
    .pipe(autoprefixer(TARGET_BROWSERS))
    .pipe(postcss([mqpacker()])) // メディアクエリをまとめる
    .pipe(gulp.dest(distPath.css, {
      sourcemaps: './'
    })) //コンパイル先
    .pipe(browserSync.stream())
    .pipe(notify({
      message: 'Sassをコンパイルしました！',
      onLast: true
    }))
}

/**
 * 画像圧縮
 */
const imgImagemin = () => {
  return gulp.src(srcPath.img)
    .pipe(
      imagemin(
        [
          imageminMozjpeg({
            quality: 80
          }),
          imageminPngquant(),
          imageminSvgo({
            plugins: [{
              removeViewbox: false
            }]
          })
        ], {
          verbose: true
        }
      )
    )
    .pipe(gulp.dest(distPath.img))
}


/**
 * html
 */
const html = () => {
  return gulp.src(srcPath.html)
    .pipe(gulp.dest(distPath.html))
}

/**
 * js
 */
const js = () => {
  return gulp.src(srcPath.js)
    .pipe(gulp.dest(distPath.js))
}


/**
 * php
 */
const php = () => {
  return gulp.src(srcPath.php)
    .pipe(gulp.dest(distPath.php))
}

/**
 * 独自fontをsrc配下に読み込む際の対応
 */
const font = () => {
  return gulp.src(srcPath.font)
    .pipe(gulp.dest(distPath.font))
}

/**
 * ローカルサーバー立ち上げ
 */
const browserSyncFunc = () => {
  browserSync.init(browserSyncOption);
}

const browserSyncOption = {
  server: "./_static/dist/"
}

/**
 * リロード
 */
const browserSyncReload = (done) => {
  browserSync.reload();
  done();
}

/**
 *
 * ファイル監視 ファイルの変更を検知したら、browserSyncReloadでreloadメソッドを呼び出す
 * series 順番に実行
 * watch('監視するファイル',処理)
 */
const watchFiles = () => {
  gulp.watch(srcPath.scss, gulp.series(cssSass))
  gulp.watch(srcPath.html, gulp.series(html, browserSyncReload))
  gulp.watch(srcPath.js, gulp.series(js, browserSyncReload))
  gulp.watch(srcPath.img, gulp.series(imgImagemin, browserSyncReload))
  gulp.watch(srcPath.php, gulp.series(php, browserSyncReload))
  gulp.watch(srcPath.font, gulp.series(font, browserSyncReload))
}

/**
 * seriesは「順番」に実行
 * parallelは並列で実行
 *
 * 一度cleanでdistフォルダ内を削除し、最新のものをdistする
 */
exports.default = gulp.series(
  clean,
  gulp.parallel(html, cssSass, js, imgImagemin, php, font),
  gulp.parallel(watchFiles, browserSyncFunc)
);

試したこと

ググったらこれを打ち込めば直ると記載ありましたが全く解決できず。。。
svgスプライト？で読み込むのかどうか全くわからずです。。

npm install mozjpeg

上記のエラー文はimgフォルダの中にsvgが入ってる状態でした。
今は写真のようにsvgに分けています。
分けている状態だとnpx gulpで正常に起動しますが、svg画像だけ読み込めないです。

Answer 1

プラグイン、gulp-imageminは、SVGファイルには対応していない、といったエラーです。
そもそも、SVGファイルは、テキストベースのファイルのため、
圧縮の必要はありません。
（改行や、余計なスペースを削除すれば、容量を多少抑えられはするが、微々たる変化）
よって、.svgとつくファイルは回避して、gulp-imageminをかけない、という構文にする必要があります。

Comments

[kogari]

miyabiさん
ありがとうございます！

svgファイルを削除して、gulpfile.jsのimgImagemin関数の中でgulp-imageminをかけないようにするという事でしょうか？

[miyabi_pudding]

違います。
gulpの構文の中で、
imgフォルダを参照している箇所にて、
.svgのファイルに対しては、処理をかけない、という構文にする必要があるということです。

[kogari]

そういう事でしたか。ありがとうございます！