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/ 配下にテスト用の画像を格納します。
今回は以下の画像を用意しました。

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

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

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年10月
 1
2345678
9101112131415
16171819202122
23242526272829
3031