gulpで画像を軽量化、gulp-imageminを使ってコマンドラインから画像を圧縮する（インストール編）
先日、「WebPへの変換をもっと簡単に、gulp-webpを使ってWebP画像を生成する方法」では、gulpを使ってWebP形式に画像を変換する方法をご紹介しました。
IE（Internet Explorer）11がサポート対象外になり画像の圧縮形式にWebPを利用する機会が増えたとお伝えしましたが、お客様のご要望や諸般の事情によりレガシーブラウザに対応しなければならないこともあります。
そういったケースに対応するためには従来通りPNGやJPEG形式の画像を利用しますが、その場合でもファイルサイズを軽減するために画像の圧縮は必要です。
今回も前回の記事同様、gulpを使って画像を圧縮する方法をご紹介したいと思います。gulpを利用するにはNode.jsの実行環境が必要です。実行環境の導入については下記の記事を参照してください。
gulp-imageminとは
gulpで画像を圧縮するには「gulp-imagemin」というパッケージを利用します。
「imagemin」という画像圧縮ツールをgulpから利用するためのパッケージで、PNG、JEPG、GIF、SVG形式の画像の圧縮に対応しています。
gulp-imageminは弊社でもHTMLコーディングを行う際に利用しているパッケージですが、2021年に行われたアップデートによりメジャーバージョンが8系となりgulpでのタスクの記述がESM形式に変更になったようです。
当記事執筆時点（2022年1月18日）では導入している他のタスクとの兼ね合いで7系のパッケージを利用していますが、今後8系での利用が主流となると思いますので、8系、7系両方のインストールと実行タスクを紹介します。
gulp-imageminのインストールと実行(8.x系)
最新バージョンの8系をインストールする際には下記のコマンドを実行します。
|
1 2 |
npm init -y npm install --save-dev gulp gulp-imagemin |
インストールが完了したらgulpタスクをgulpfile.jsに記載します。v8系からはESM形式でタスクを書かなければいけません。
|
1 2 3 4 5 6 7 8 |
import gulp from 'gulp'; import imagemin from 'gulp-imagemin'; export default () => ( gulp.src('src/images/*') .pipe(imagemin()) .pipe(gulp.dest('dist/images')) ); |
「src/images」フォルダ内の画像を圧縮して「dist/images」フォルダに生成する、というタスクになります。（GitHub参照）タスクの準備ができたら実行してみます。
|
1 |
npx gulp |
今までの7系のgulp-imageminを利用していればこれで画像が圧縮されるところですが、8系で実行すると下記のようなエラーが表示されました。
|
1 2 3 4 5 6 7 8 9 10 11 |
C:\path\to\gulp-imagemin\v8> npx gulp C:\path\to\gulp-imagemin\v8\gulpfile.js:32 import gulp from 'gulp'; ^^^^^^ SyntaxError: Cannot use import statement outside a module at wrapSafe (internal/modules/cjs/loader.js:1001:16) at Module._compile (internal/modules/cjs/loader.js:1049:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) （略） |
エラー内容を見る限り、CommonJS形式からEMS形式に変更したことによるエラーのようです。GitHubのドキュメントをもう一度よく見てみると
package.jsonファイルでモジュールを指定する必要があるようです。
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "name": "artis-blog-gulp-imagemin-v8", "version": "1.0.0", // 略... "devDependencies": { "gulp": "^4.0.2", "gulp-imagemin": "^8.0.0" }, // この行を追加 "type": "module" } |
package.jsonファイルを修正してもう一度タスクを実行してみると
|
1 2 3 4 5 |
C:\path\to\gulp-imagemin\v8> npx gulp [23:50:32] Using gulpfile ~\path\to\gulp-imagemin\v8\gulpfile.js [23:50:32] Starting 'default'... [23:50:50] gulp-imagemin: Minified 3 images (saved 153 kB - 5%) [23:50:50] Finished 'default' after 17 s |
圧縮された画像が「dist/images」フォルダ内に生成されました。圧縮率は5%なのでデフォルトの設定ではあまり効率が良いとは言えませんが、プラグインを組み合わせることで調整も可能です。 プラグインを利用した圧縮方法に関してはまた別の記事で紹介できればと思います。
gulp-imageminのインストール(7.x系)
次はv7系をインストールして実行してみます。v7系をインストールする際にはコマンドでバージョンを明示する必要があります。
|
1 2 |
npm init -y npm install --save-dev gulp gulp-imagemin@7 |
package.jsonを見てv7系のgulp-imageminがインストールされたことを確認します。
|
1 2 3 4 5 6 7 8 9 |
{ "name": "artis-blog-gulp-imagemin-v7", "version": "1.0.0", // 略... "devDependencies": { "gulp": "^4.0.2", "gulp-imagemin": "^7.1.0" } } |
インストールが完了したらこちらもタスクを用意します。タスクはGitHubのv7.1.0tagに記載されているものをお借りしました。
|
1 2 3 4 5 6 7 8 |
const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); exports.default = () => ( gulp.src('src/images/*') .pipe(imagemin()) .pipe(gulp.dest('dist/images')) ); |
gulpfile.jsにタスクを記載したら実行してみます。
|
1 2 3 4 5 6 |
PS C:\path\to\gulp-imagemin\v7> npx gulp [24:09:25] Working directory changed to ~\path\to\gulp-imagemin\v7 [24:09:25] Using gulpfile ~\path\to\gulp-imagemin\v7\gulpfile.js [24:09:25] Starting 'default'... [24:09:41] gulp-imagemin: Minified 3 images (saved 153 kB - 5%) [24:09:41] Finished 'default' after 16 s |
こちらも正常に画像が圧縮されました。圧縮率はv8と同様の5%なので圧縮効率にはあまり差はないようですね。
さいごに
gulp-imageminの利用方法について簡単に説明いたしました。
gulp-imageminのバージョンがv8にかわったとことによりタスクの記述を含めて多少変更する必要があることがおわかりいただけたかと思います。
インターネットに散見する記事は7系以下のバージョンに関するものが多いためエラーが出ると困惑してしまいますが、慌てずにしっかりとドキュメントを確認して対処するようにしましょう。
なかもと
最新記事 by なかもと (全て見る)
- gulpで画像を軽量化、gulp-imageminを使ってコマンドラインから画像を圧縮する（オプション・プラグイン編） - 2022年5月13日
- gulpで画像を軽量化、gulp-imageminを使ってコマンドラインから画像を圧縮する（インストール編） - 2022年3月16日
- WebPへの変換をもっと簡単に、gulp-webpを使ってWebP画像を生成する方法 - 2022年1月20日
- CSSのfilterプロパティを利用して簡単なフィルターを画像に追加しよう - 2021年10月8日
- CSS mix-blend-modeを利用してブレンドモードをキレイに再現しよう - 2021年9月22日
関連記事
最新記事
FOLLOW US
最新の情報をお届けします
- facebookでフォロー
- Twitterでフォロー
- Feedlyでフォロー