gulp-imageminを使ってみる

Gulpの環境で画像圧縮を行う方法として、gulp-imageminを使ってみます。
使用するバージョンはgulp-imagemin の7.1.0になります。

設定方法

ターミナルでGulpの環境に移動して、gulp-imageminのインストールを行います。

npm install gulp-imagemin@7.1.0 --save-dev

現時点でのgulp-imageminの最新バージョンは8.0.0ですが、8.0.0からES Modulesに変更されているようなので、今回はひとつ前のバージョンを使用しています。

パッケージのインストール後、gulpfile.jsに追記します。

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('img', function() {
  return gulp.src(['_src/img/**/*.*'])
    .pipe(imagemin())
    .pipe(gulp.dest('assets/img/'));
});

gulp.task('default', gulp.parallel('img'));

_src/img/ 配下にテスト用の画像を格納します。
今回は以下の画像を用意しました。

• dummy.jpg
• dummy.png
• dummy.svg

これでタスクを実行するとassets/img/ 配下に画像が生成され、それぞれ下記のように圧縮されました。

• dummy.jpg (405KB→89KB)
• dummy.png(872KB→820KB)
• dummy.svg(532B→409KB)