2023-05-25OrganizationEJSにwebp生成と画像圧縮の自動化を追加するsellJavaScript,ejs,WebPnode.jsで画像の圧縮とwebp生成を自動化するをEJSテンプレートに追加しました。作業なくなり、効率がぐんと上がりました。今回はそのjsを読み解いていこうとおもいます。パッケージのインストール下記パッケージをインストールします。nodeは16.0.0にバージョンアップしました。作成imagemin.jsに処理内容をかいていきます。パッケージをインポートnode.jsで画像の圧縮とwebp生成を自動化するでは、require()を使ってますが、requireはESモジュールスコープで定義されていませんので、代わりにimportを使用してください。いうエラーになってしまったので、言われるがままにimportで対応しました。"module",を追記しました。画像のパスを変数にしておきます。});};imageminとは最初にimportしたパッケージのimagemin-keep-folderです。ディレクトリ構造を維持した状態で、吐き出し先に最適化した画像群を送ってくれます。画像パスとして引数[targetFiles]が指定されています。[imageminWebp(~の部分で、パッケージのimagemin-webpを使ってwebpを生成しています。※quality(デフォルトは75)は指定しないとまれに処理が通らない場合があるそうです。[~に圧縮処理をしてくれるパッケージを記載しています。※plugins:はuse:の複数用なだけなのかuseをpluginsに変えても処理が通りました。圧縮後の画像のフォルダ構造を、/img/から2階層上の../../dist/assets/img/にカスタマイズされてます。optimized!」を出力する処理をつなげています。-–initial-cはcommandの略、--initialはwatchコマンド実行後にスクリプトを1回実行するという意味です。zumilog<symbol>を使ったSVG画像の圧縮がうまくいかない<symbol>で囲んだSGVを<use>で出力させSVG画像を使い回す方法をよくやるのだが、これを圧縮すると、SVGコードが消えてしまいました。SVGはもともと軽いし...ということで、一旦imagemin-svgoのSVGの圧縮はしないで使用しています。