Gulpでサイト全体（すべてのディレクトリ）の画像を圧縮して置き換える方法

※この記事はGulpが使えることが前提です
※Gulpのインストールについては以下の記事で紹介しています

Gulpでサイト全体（すべてのディレクトリ）の画像を圧縮して置き換える方法

みなさんはサイトを制作するときの画像の圧縮はどうしてますか？毎回外部のサービスなどを使用して圧縮するのは面倒ですよね？僕はそれがすごく嫌だったのでGulpで画像圧縮をするようにしました。その方法をご紹介します。

Gulpでサイト全体の画像を圧縮して置き換える方法

今回ご紹介する圧縮の特徴は

• サイト全体（すべてのディレクトリ）の画像を圧縮
• 圧縮した画像を同じ場所に同じ名前で置き換え

上記2点となります。

まずは必要なライブラリをインストール

npm install gulp-imagemin gulp-changed imagemin-jpeg-recompress imagemin-pngquant imagemin-gifsicle -D

gulpfile.jsにタスクを記述

var imagemin = require('gulp-imagemin');
var changed = require('gulp-changed');
var imageminJpg = require('imagemin-jpeg-recompress');
var imageminPng = require('imagemin-pngquant');
var imageminGif = require('imagemin-gifsicle');
var imageminSvgo = require('imagemin-svgo');

//画像圧縮タスク
var dir = ''
var changedDir = '**/'
var distDir = ''

gulp.task('imagemin', function(){
  gulp.src(dir + '**/*.+(jpg|jpeg|JPG|png|PNG|gif|svg)')//サイト全体の画像を指定
  .pipe(changed(changedDir))//変更があるかチェック
  .pipe(imagemin([
    imageminPng(),
    imageminJpg(),
    imageminGif({
      interlaced: false,
      optimizationLevel: 3,
      colors:180
    }),
    imagemin.svgo()
  ]))
  .pipe(gulp.dest(distDir))//同じ場所に書き出し
});

あとは実行しよう！

以下のコマンドを叩くだけですべての画像が圧縮されます。

gulp imagemin

すべての画像を圧縮するため実行する前に念のためgitでcommitしておくと良いかもしれません。

実行結果

画像の指定場所と書き出し先を変更する場合

上記のコードはすべての画像が対象になっていますが少しパスを書き換えるだけで画像の指定場所と書き出し先を変更することが可能です。

src/imggesの中の画像をdist/imagesに書き出したい場合

以下のようにパスを変更してください。

var dir = 'assets/images/'
var changedDir = 'dist/images/'
var distDir = 'dist/images/'

SVGの圧縮は出来ないの？

出来ます！！

ただすみません今回はあえて外しております。

svgoを使用すると圧縮はできるのですがsvgにsymbolが含まれていると0KBになってしまい、うまくいかない場合があったからです。

対処法も調べてcleanupIDsオプションも試したのですがうまく行かず...

解決でき次第更新しようと思います！

まとめ

この方法を知ってからは画像の圧縮に割く時間が10/1ほどになったんじゃないかと思います（笑）
それくらい便利になりましたし、他のことに時間を使えるようになりました。