【Gulp】画像圧縮する方法！jpg,png対応版

どうも。みずかず(@mizukazu_1)です。

Web制作って画像をたくさん使うのですが、その際に圧縮をするかと思います。

Web上のツールを使って圧縮することもあり大変便利なのですが

実はGulp上でも圧縮出来ちゃいます。

多分知っている人の方が多いと思いますが、今回はそんなGulpでの画像圧縮の方法を紹介していきます。

そもそもGulpとは？

GulpというのはSassのコンパイルや画像の圧縮などのちょっと面倒だなっていう作業をJSに任せることの出来るめっちゃ便利なものです。

カッコいい言葉で言うと「タスクランナー」っていうらしいんですけど。。。

長くなるのでここではGulpの詳しい説明や使い方については割愛します。

Gulpで画像圧縮をする方法

Gulpではタスクという形で実行したい処理を書いていきます。

ですので、ここでは画像圧縮を行うタスクを書きます。

gulpfile.jsを用意

ルートディレクトリにgulpfile.jsという名前のjsファイルを作成します。

ここに必要なタスクを書いていくことでGulpを動かすことが出来ます。

画像圧縮に必要なGulpプラグインをインストール

画像圧縮に使うGulpプラグインは以下の3つになります。

gulp-imagemin
imagemin-mozjpeg
imagemin-pngquant

gulp-imageminは基本必須っぽいです。

あとは画像の形式によってプラグインが用意されているので必要に応じてインストールするって感じですね。

インストールに関してはnpmを使ってインストールします。

npm i gulp-imagemin -D

npm i imagemin-mozjpeg -D

npm i imagemin-pngquant

こんな感じでインストールしていきます。

npm i gulp -D

一応書いておくのですが、gulp自体のインストールも忘れちゃダメですよ。

これがないとそもそもGulpが機能しないので。。。

画像圧縮タスクを書く

プラグインがインストール出来たらgulpfile.jsに画像圧縮のタスクを書いていきます。

var gulp     = require('gulp');
var imagemin = require('gulp-imagemin');
var mozjpeg  = require('imagemin-mozjpeg');
var pngquant = require('imagemin-pngquant');

gulp.task('imagemin', () => {
  var src = 'src/**/*.{jpg,jpeg,png}';
  var dist = 'dist'
  return gulp.src(src)
    .pipe(imagemin([
      pngquant(),
      mozjpeg()
  ]))
  .pipe(gulp.dest(dist));
});

必要なプラグインを読み込んでタスクを書いていくだけなのでそんなに難しくはないと思います。

画像圧縮を使ってみる

このタスクを使用する場合にはコマンドから

gulp imagemin

こんな感じで、設定したタスク名を叩いてあげれば使うことが出来ます。

後はお好みで、ファイルの変更があった場合にタスクを走らせる～とか色々出来るので各自カスタマイズしていくと良いと思います。

まとめ

今回はGulpを使用しての画像圧縮方法を紹介しました。

実務でも結構使うので覚えておくとよいかもしれません。

慣れるとこっちで画像圧縮行う方が早いので。

今回は使わなかったのですが、圧縮するときに引数にパラメータを渡すことで圧縮のクオリティやスピードも変更できるのでその辺も上手く使いこなせると圧縮の幅が広がって良いと思います。

みずかず

Gulpは便利なのでもっと色々使ってみて知識を深めていけたらと思ってます！