Gulpの環境で画像圧縮を行う方法として、gulp-imageminを使ってみます。
使用するバージョンはgulp-imagemin の7.1.0になります。
設定方法
ターミナルでGulpの環境に移動して、gulp-imageminのインストールを行います。
1 | npm install gulp-imagemin@7.1.0 --save-dev |
現時点でのgulp-imageminの最新バージョンは8.0.0ですが、8.0.0からES Modulesに変更されているようなので、今回はひとつ前のバージョンを使用しています。
パッケージのインストール後、gulpfile.jsに追記します。
1 2 3 4 5 6 7 8 9 10 | 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)
コメントが承認されるまで時間がかかります。