gulpで画像を圧縮する #Node.js

はじめに

「この記事を見ればgulpで画像を圧縮する手順がわかる！」という記事です。

画像の圧縮ツールは色々とあり、有名なところですとTinyPNGを使用している方も多いと思います。
しかし、本番公開前の画像などを外部サービスで圧縮するのはどうなんだい、という会社もあると思いますので、今回はgulpを使用してローカル環境で圧縮する方法をまとめました。

参考になったらぜひLGTMをお願いします！！

事前準備

gulpの環境構築の方法については、以前gulp超入門という記事を執筆していますので、そちらを参考にしてください。
環境構築はこちらの記事を元にできているものとして進めて行きます。

gulp超入門

ディレクトリ構成は以下の通りです。src配下が開発環境で、dist配下に圧縮した画像が吐き出されます。

ディレクトリ構造

プロジェクト名
 ├ dist
 │  └ image
 ├ node_modules
 ├ src 
 │  └ image
 ├ package.json
 └ gulpfile.js

使用するプラグインです。

プラグイン	バージョン
Node.js	12.14.1
npm	6.13.4
npm	6.13.4
gulp	4.0.2
gulp-imagemin	7.1.0
imagemin-gifsicle	7.0.0
imagemin-mozjpeg	9.0.0
imagemin-pngquant	9.0.1
imagemin-svgo	8.0.0

プラグインをインストール

ターミナル

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

インストールが完了するとpackage.jsonにプラグインが追加されます。

gulpfile.jsに記述

gulpfile.js

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const imageminGif = require('imagemin-gifsicle');
const imageminSvg = require('imagemin-svgo');

var paths = {
    srcDir: './src',
    dstDir: './dist'
}

// 画像を格納しているフォルダのパス
var srcGlob = paths.srcDir + '/image';
var dstGlob = paths.dstDir + '/image';

// jpg,png,gif,svg画像の圧縮タスク
function imageMin() {
    return (
        // 参照するフォルダのパスを記述する
        gulp.src(srcGlob + '/**/*.+(jpg|jpeg|png|gif|svg)')
            .pipe(imagemin([
                // pngの圧縮
                pngquant({
                    quality: [0.6, 0.8]
                }),
                // jpgの圧縮
                mozjpeg({
                    quality: 85,
                    progressive: true
                }),
                // gifの圧縮
                imageminGif({
                    interlaced: false,
                    optimizationLevel: 3,
                    colors: 180
                }),
                // SVGの圧縮
                imageminSvg()
            ]
            ))
            // 圧縮したファイルの吐き出し先のパス
            .pipe(gulp.dest(dstGlob))
    );
}

// imageフォルダ配下に変更があれば自動でコンパイルしてくれる
function watchFile(done) {
    gulp.watch(srcGlob + '/**/*.+(jpg|jpeg|png|gif|svg)', imageMin);
    done();
}

// タスクの実行
exports.default = gulp.series(imageMin, watchFile);

タスクの実行

最後にコマンドを叩けば実行されます。

ターミナル

$ npx gulp

watchで監視状態になっているのでimageフォルダ配下に画像が追加されたら自動で圧縮してくれます。

最後に

最後までご覧いただきありがとうございました。
案件などによってディレクトリ構成などアレンジして使っていただければ幸いです。

「参考になったよ！」という方は、ぜひLGTMをお願いします！！