gitのpre-commitを紹介しました。使い自動で画像ファイルのminifyを行う方法を紹介します。利用すると、画像ファイルのminifyを行うことができます。画像のminifyはいうまでもなくwebで重要であり、可能な限りこういったツールを利用したいです。画像を作成するたびに都度imageminを実行するのは手間ですので、こうった作業はできるだけ自動化したいです。いったプラグインがあります。時間がかかるようになってしまいます。ビルドのたびに処理する必要性も薄いです。リポジトリに追加する時点でminifyしてしまえば十分に思えます。hookを利用し、コミット時に自動でminifyできるようにしたいと思います。今回利用するツールの紹介です。画像をminifyできるツールです。今回はこのツールをコミット時にコミット対象の画像ファイルに対して実行することを目標にします。hookとnpmのpackage.jsonをうまく組み合わせてくれるツールです。スクリプトの内容をコミット時に実行してくれるようになります。hookの利用を半強制することもできます。lint-stagedokonet/lint-staged実行するとgitのステージに上がっているファイルだけに対して指定したスクリプトを実行できます。上記のhuskyと組み合わせることで、pre-commit時の処理を簡単に記述できます。通常は、eslintやstylelintなどのlintをコミット前に行い、lintを通らないファイルがある場合にコミットを中断する目的で利用します。コミットされるファイルのうち指定した拡張子に対してコマンドを実行してくれます。しそのままコミットします。実行するようにします。対してimageminを実行し、それぞれをminifyしたファイルで置き換えるようにします。残念ながら今回実行したい「複数の画像ファイルを指定してそれぞれを置き換え」といった用途には利用できません。imagemin-cliの内容を参考に、以下のようなスクリプトを記述しました。簡潔に記述できるため便利です)。見ることができませんでした(方法を知っている方がいたら教えてください)。このスクリプトをlint-stagedから呼び出すようにします。時にスクリーンショットのように自動でimageminを実行してくれます。コミット前後で画像のサイズが小さくなっていることがわかります(もちろん画像の見た目には変化はありません)。このブログで利用している画像も、ここで紹介した方法でコミット時に最適化するようにしています。設定の最終系を閲覧できるので、よろしければ参考にしてください。(1)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。