Gulp 5で画像容量を圧縮

Home
Project
Gulp 5で画像容量を圧縮

概要

PNG・JPG・SVGの容量をGulp 5で圧縮する。以下の構成を想定。

1
├── dist
2
│   ├── ここに圧縮後の画像を生成
3
│   └── hoge
4
│       └── ディレクトリ構造は維持して生成
5
└── src
6
    ├── ここに元画像を配置
7
    └── hoge
8
        └── ディレクトリも切れるようにする

プロジェクトの作成

package.jsonを適当に作成。

1
{
2
  "name": "gulp-compress-image",
3
  "private": true,
4
  "version": "0.0.0",
5
  "type": "module",
6
  "scripts": {},
7
  "devDependencies": {}
8
}

開発環境の整備

モジュールの追加

1
npm i -D del gulp gulp-imagemin imagemin-pngquant svgo through2

モジュール名	簡易説明
del	ディレクトリやファイルの削除。
gulp	タスクランナー。
gulp-imagemin	画像圧縮プラグイン。
imagemin-pngquant	PNG専用の画像圧縮プラグイン。
svgo	SVGの最適化。
through2	カスタムストリーム作成用。

gulp-imageminあたりは脆弱性があると表示されるが、ローカルで使用するだけなので問題なし。

Node.jsのバージョン

どうもNode.jsがバージョン21より新しいとエラーになる。

1
Error [ERR_REQUIRE_ASYNC_MODULE]: require() cannot be used on an ESM graph with top-level await. Use import() instead. To see where the top-level await comes from, use --experimental-print-required-tla.
2
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:393:13)
3
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:335:47)
4
    at loadESMFromCJS (node:internal/modules/cjs/loader:1570:24)
5
    at Module._compile (node:internal/modules/cjs/loader:1722:5)
6
    at Object..js (node:internal/modules/cjs/loader:1905:10)
7
    at Module.load (node:internal/modules/cjs/loader:1474:32)
8
    at Function._load (node:internal/modules/cjs/loader:1286:12)
9
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
10
    at wrapModuleLoad (node:internal/modules/cjs/loader:234:24)
11
    at Module.require (node:internal/modules/cjs/loader:1496:12) {
12
  code: 'ERR_REQUIRE_ASYNC_MODULE'
13
}

バージョン21で固定する。

1
volta install node@21.7.3
2
volta pin node@21.7.3

バージョンを確認してみるとよく分からないエラーに遭遇。

1
node -v
2

3
Error: proto::tool::required
4

5
  × This project requires Node.js 21.7.3 (detected from .../package.json), but this version has
6
  │ not been installed. Install it with proto install node 21.7.3, or enable the auto-install setting to automatically install missing
7
  │ versions!

書いてあるとおりproto install node 21.7.3したら解消した。

雑記

出力先の掃除

delを使用して過去に生成した画像を消すようにした。置いておく意味もないので。

画像が壊れる問題

Gulp 5の場合、srcのencodingを無効にする必要があるらしい。
https://stackoverflow.com/questions/78730067/gulp-imagemin-breaking-images-and-not-optimizing

PNGの圧縮

PNGはgulp-imageminのoptipngでも圧縮できるみたいだが、そこで処理が止まってしまう？ので、かわりにimagemin-pngquantを使用した。

SVGの圧縮

imageminのsvgo()でだいぶ圧縮されるが、idやdata-nameといった属性が残っていた。

1
<?xml version="1.0" encoding="UTF-8"?>
2
<svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
3
  ...
4
</svg>

svgo()のオプションを指定する方法がよく分からなかったので、直接svgoをインストールして使うことにした。

圧縮率の表示

through2を使用して、圧縮率をコンソールに出力するようにした。

1
 -  jpg/sample.jpg  953293 bytes -> 602399 bytes  36%削減
2
 -  png/sample.png  5726530 bytes -> 1908340 bytes  66%削減
3
 -  svg/sample.svg  774 bytes -> 496 bytes  35%削減

コンソールの色付けは以下を参考にした。
https://qiita.com/shuhei/items/a61b4324fd5dbc1af79b

成果

https://github.com/namakurajin/compress-image-with-gulp-5

1
// 必要なモジュール
2
import { src, dest } from 'gulp';
3
import imagemin, { mozjpeg, svgo } from 'gulp-imagemin';
4
import pngquant from 'imagemin-pngquant';
5
import { optimize } from 'svgo';
6
import through2 from 'through2';
7
import { deleteSync } from 'del';
8

9
// コンソールの色付け
10
var green = '\u001b[32m';
11
var reset = '\u001b[0m';
12

13
export default () => (
14
  deleteSync(['dist/**']),  // まず、出力先を空にしておく
15
  src('src/**/*.{jpg,png,svg}', { encoding: false })
16
    // 画像を圧縮
17
    .pipe(
18
      imagemin([
19
        mozjpeg({quality: 40, progressive: true}),
20
        pngquant({
21
          quality: [0.5, 0.6],
22
          speed: 1
23
        }),
24
        svgo()
25
      ])
26
    )
27
    // SVGからdata-name属性を除去
28
    .pipe(through2.obj((file, _enc, cb) => {
29
      const result = optimize(file.contents.toString(), {
30
        plugins: [
31
          {
32
            name: 'removeAttrs',
33
            params: {
34
              attrs: ['data-name']
35
            }
36
          }
37
        ]
38
      });
39
      file.contents = Buffer.from(result.data);
40
      cb(null, file);
41
    }))
42
    // 圧縮率を表示
43
    .pipe(through2.obj((file, _enc, cb) => {
44
      const originalSize = file.stat.size;
45
      const compressedSize = file.contents.length;
46
      const compressionRatio = Math.floor((originalSize - compressedSize) / originalSize * 100);
47
      console.log(` - ${green} ${file.relative} ${reset} ${originalSize} bytes -> ${compressedSize} bytes ${green} ${compressionRatio}%削減 ${reset}`);
48
      cb(null, file);
49
    }))
50
    // 出力
51
    .pipe(dest('dist'))
52
);

続く...かもね