ディレクトリ構造を保ったまま画像最適化をする

2023.08.29 09:00
2023.08.15 09:29
ディレクトリ構造を保ったまま画像最適化をする

前回やってみた画像最適化ですが、ディレクトリ構造が維持できなくて、全部同じ階層に吐き出されていました。

ということで、ディレクトリ構造を保ったまま最適化できるようにカスタマイズしてみました。前回のプロジェクトを改変する形で進めます。

1. imagemin-keep-folderのインストール

ディレクトリ構造を保つライブラリがあるそうで、それを入れます。便利ですね。

npm install imagemin-keep-folder --save-dev

次に「index.mjs」を書き換えます。

import imagemin from "imagemin-keep-folder";
import imageminMozjpeg from 'imagemin-mozjpeg';
import imageminPngquant from 'imagemin-pngquant';

imagemin(["./img/**/*.{jpg,jpeg,png}"], {
  plugins: [
    imageminMozjpeg({
      quality: 65,
      progressive: true,
    }),
    imageminPngquant({
      quality: [.6, .8]
    })
  ],
  replaceOutputDir: (output) => {
    return output.replace(/img\//, "./img2/");
  },
}).then(() => {
  console.log('done!');
});

imageminの読み込みとoutputの部分が変わっています。
これで変更は完了です。実際に実行してみます。

npm run imagemin

ディレクトリ構造を保ったまま、ちゃんとサイズが小さくなっていますね！無事成功です！

今回はこれで以上です！