【2022年版】gulp-imageminで画像をまるっと圧縮しよう

こんにちは、づみです。

本記事では、gulp-imageminを使ってプロジェクト内の画像をまるっと圧縮する方法をご紹介します。

gulp-imageminの導入方法は調べればたくさん出てくるのですが、gulp-imageminのバージョンが8.0だと他記事の手順で進めると詰まります。（自分は詰まった）

詰まるたびに毎回調べていたので、この際まとめようと思いました。

gulp-imageminを使った画像圧縮方法を知りたい方の参考になれば幸いです。

gulp-imageminを使って画像を圧縮する方法

基本的な手順は下記の通り。

それでは手順を解説していきます。

ファイルの事前準備

今回はのファイル構成は下記のような形で進めていきます。

assets
 L images
   L img01.png
   L img02.jpg
   L img03.jpg
L dist
   L images

※練習用なので、今回は画像のみ用意しています。ファイル構成は何でもOK。

npmをインストールする

さてさて、ファイルが準備できたらnpmモジュールをインストールしていきます。

下記コマンドをターミナルで実行してください（vscodeのターミナルからやると早いかも）

npm init -y

実行すると、package.jsonが生成されるはずです。

現在のファイル構成は以下の通り

assets
 L images
   L img01.png
   L img02.jpg
   L img03.jpg
dist
   L images
package.json（new!）

必要なプラグインをインストールしよう

次は必要なプラグインをインストールしていきます。下記コマンドで一括インストールできます。

npm i -D gulp gulp-imagemin

インストールしたモジュール

• gulp
• gulp-imagemin

コマンドを実行したら、新たにnode_modulesフォルダとpackage-lock.jsonが追加されたと思います。

また、package.jsonの中身「devDependencies」の欄に各モジュールが自動で追加されているはずです。

gulpfile.jsを作成する

続いてgulpを動かすために必要なgulpfile.jsを作成します。ルート直下に「gulpfile.js」を作成します。

現時点でのファイル構成は上記の通り。

assets
 L images
   L img01.png
   L img02.jpg
   L img03.jpg
dist
   L images
package.json
package-lock.json
node_modules
gulpfile.js（NEW!）

それではgulpfile.jsにタスクを書いていきましょう。

STEP1：package.jsonにキーを記述（変更点）

まずはpackage.jsonにプロパティを追加します。下記の type を追加してください。

"devDependencies": {
    ...
  },
  "type": "module"

直前のカンマを忘れないように注意してください。

このtype: “module”を追加するのが他記事との変更点になります。

なぜ、type:”module”を追加するのか？

gulp-imageminの最新版（8.0.0）をインストールした場合、下記エラーが出るからです。

require() of ES modules is not supported.
require() of /Users/user/Documents/codespace/gulp-imagemin_practice/node_modules/imagemin-mozjpeg/index.js from /Users/user/Documents/codespace/gulp-imagemin_practice/gulpfile.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/user/Documents/file/gulp-imagemin_practice/node_modules/imagemin-mozjpeg/package.json.

和訳すると、「requireはESモジュールでサポートされていないよ、代わりにimportを使うかモジュールをいじるかしてね」みたいなことが書いています。

で、今回に関しては、モジュールの定義にimportを使う形にしました。

ただし、そのままimportに変えればよいというわけではなく、package.jsonにtype: moduleを設定しないと怒られます。

ちなみに、gulp-imageminをダウングレードすれば今までの書き方で動くはずです。

↓ダウングレード時のコマンド↓

npm i -D gulp-imagemin@7.1.0

STEP2：gulpfile.jsにタスクを記述

さてさて、気を取り直してgulpfile.jsを実際に書いていきましょう。

下記をコピペすればOKです。

// モジュールの定義
import gulp from 'gulp';
import imagemin from 'gulp-imagemin';

// 関数の定義
const ImgImagemin = function() {
  return gulp
  .src("./assets/images/**") //タスクを実行するディレクトリを指定
    .pipe(imagemin())
    .pipe(gulp.dest("./dist/images")) // 出力先ディレクトリを指定
};
// 処理実行
export default(done) => {
  ImgImagemin();
  done();
}

上記をまるごとgulpfile.jsにコピペしましょう。

コマンド実行

これで準備が整ったので、コマンドを実行していきましょう。

npx gulp default

実行したら、コマンドラインが上記のように表示されるはずです。

これでgulp-imageminによる画像圧縮が完了です！

この例では、42.3%の圧縮に成功しました。

gulp-imageiminの画像圧縮まとめ

今回はgulp-imageminでの画像圧縮方法を紹介しました。

他にも細かく圧縮率などを調整したい場合やgif、svgも圧縮したい場合は別プラグインを導入することで実現できます。そのうち記事書きます。

今回は以上です。