技術と雑記ブログ

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

みなさんはサイトを制作するときの画像の圧縮はどうしてますか？ 毎回外部のサービスなどを使用して圧縮するのは面倒ですよね？

僕はそれがすごく嫌だったのでGulpで画像圧縮をするようにしました。 その方法をご紹介します。

目次

  1. Gulpでサイト全体の画像を圧縮して置き換える方法
    1. まずは必要なライブラリをインストール
    2. gulpfile.jsにタスクを記述
    3. あとは実行しよう！
  2. 画像の指定場所と書き出し先を変更する場合
    1. src/imggesの中の画像をdist/imagesに書き出したい場合
  3. SVGの圧縮は出来ないの？
  4. まとめ

※この記事は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しておくと良いかもしれません。

実行結果

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

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

gulpfile.js
var dir = 'assets/images/'
var changedDir = 'dist/images/'
var distDir = 'dist/images/'

出来ます！！

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

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

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

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

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