フロントエンドのコーディングには欠かせなくなったタスクランナーのGulpですが、過去にはSassのコンパイルやCSSのミニファイ化などを紹介しましたが、今回は画像ファイルの圧縮をGulpを使って一括で行いたいと思います。   Gulpにはコーディングのフローに合わせていろんなタスクを登録しているのですが、私自身この画像圧縮もタスクに登録していて、かなり重宝しています。   今回の画像圧縮ですが、PNG、JPG、GIF、SVGと主要な画像フォーマットを全てカバーします。そこで今回は3つのパッケージをインストールする形になります。プロジェクトディレクトリに移動して、下記のコマンドを入力しそれぞれのパッケージをインストールします。

$ npm install --save-dev gulp-imagemin
$ npm install --save-dev imagemin-pngquant
$ npm install --save-dev imagemin-mozjpeg

  PNG画像の圧縮には「pngquant」というパッケージのプラグインを、JPG画像の圧縮には「mozjpeg」というパッケージのプラグインを、SVGとGIFには「gulp-imagemin」のパッケージに同梱されている「svgo」と「gifsicle」というプラグインを使用します。   今回は下記のようなディレクトリ構成で説明しています。minフォルダに圧縮済みの画像が入る形になります。

img
  - sample.jpg
  - sample.png
  - sample.gif
  - sample.svg
  - min
gulpfile.js
node_moodules

  これまでと同じようにgulpfile.jsに画像圧縮のタスクを記述していきます。PNG、JPG、GIF、SVGと全てのフォーマットが対象になるようにしています。 【gulpfile.js】

gulp.task('imagemin', function () {
  gulp.src('img/*.{jpg,jpeg,png,gif,svg}')
  .pipe(imagemin(
    [
      pngquant({ quality: '65-80', speed: 1 }),
      mozjpeg({ quality: 80 }),
      imagemin.svgo(),
      imagemin.gifsicle()
    ]
  ))
  .pipe(gulp.dest('img/min'));
});

  上記ではpngquantとmozjpegの実行時に適用されるオプションを指定しています。qualityは圧縮の画質指定になります。speedは圧縮にかかる時間を指定します。軽量化を目指すのであれば上記の内容でとりあえず大丈夫なのではないでしょうか。では実際に上記のタスクをコマンドにて実行してみます。

$ gulp imagemin
[00:00:00] Using gulpfile ~/****/****/gulpfile.js
[00:00:00] Starting 'imagemin'...
[00:00:00] Finished 'imagemin' after 14 ms
[00:00:00] gulp-imagemin: Minified 4 images (saved 211 kB - 58.5%)

  コマンド一発でわずか数秒で画像が圧縮できました！実際に圧縮後のファイル容量を比較してみますとこんな感じになりました。 JPG：102kb → 25kb PNG：181kb → 53kb GIF：68kb → 68kb SVG：11kb → 4kb   ここではGIF画像は容量は変わらなかったのですが、、それ以外のフォーマットについてはかなり軽量化されているのが確認できますね。  

Gulpのバージョン4系で推奨されている記述方法について

Gulpのバージョンが4系の場合には、gulp.task()が非推奨となっており、関数でタスクを記述する形になりますので、実際には下記のような形になります。 【gulpfile.js】

const { src, dest, watch } = require("gulp"),
 plumber = require('gulp-plumber'),
 rename = require('gulp-rename'),
 imagemin = require('gulp-imagemin'),
 mozjpeg = require('imagemin-mozjpeg'),
 pngquant = require('imagemin-pngquant');

const taskImagemin = () => 
 src('src/images/*')
  .pipe(plumber())
  .pipe(imagemin([
   pngquant({ 
    quality: [ 0.65, 0.8 ], speed: 1 
   }),
   mozjpeg({ 
    quality: 80
   }),
   imagemin.gifsicle({
    interlaced: false
   }),
   imagemin.svgo({
    plugins: [
     { removeViewBox: true },
     { cleanupIDs: false }
    ]
   }),
  ]))
  .pipe(rename(
   { suffix: '_min' }
  ))
  .pipe(dest('dist/assets/img/_min'));

// Wacth
const taskWatch = (done) => {
 watch('src/images/*', taskImagemin);
 done();
}

exports.default = taskWatch;

 

---

  いかがでしょうか、近年はモバイル端末の普及により、サイトの高速化が重要になってきています。そんな時には画像の圧縮はかなり効果的ですね。Gulpでタスク登録する場合には、画像がフォルダに入るタイミングなどで自動的に圧縮されるようにしておくと便利です。