脆弱性のないGulp画像圧縮プラグインを公開しました

Gulpで画像を圧縮するプラグインといえば、gulp-imagemin が有名ですが、インストールするたびに、たくさんの脆弱性が表示されることが懸念でした。

そこで、sharpとsvgoを使用して画像を圧縮する、Gulpのプラグインを開発し、公開しました。現バージョンではjpeg、png、web、svgの圧縮に対応しています。なお、他のファイルは圧縮せずにスキップします。

インストール方法

npm install --save-dev @yohacoo/gulp-image-compress

使い方

import gulp from 'gulp';
import imageCompress from '@yohacoo/gulp-image-compress';

function compressImages(cb) {
  gulp
    .src('src/images/**/*', { encoding: false })
    .pipe(imageCompress())
    .pipe(gulp.dest('dist/images'));
  cb();
}

export default compressImages;

Gulp 5からは、gulp.srcに { encoding: false } をつけてください。そうしないと unsupported image format エラーになります。

オプション付きの例

import gulp from 'gulp';
import imageCompress from '@yohacoo/gulp-image-compress';

function compressImages(cb) {
  gulp
    .src('src/images/**/*', { encoding: false })
    .pipe(
      imageCompress({
        jpeg: { quality: 85, progressive: true },
        png: { quality: 85, progressive: true },
        webp: { quality: 85, alphaQuality: 85 },
        svg: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  cleanupIds: false,
                },
              },
            },
            'removeDimensions',
          ],
        },
        allowLargerOutput: true,
        verbose: true,
      })
    )
    .pipe(gulp.dest('dist/images'));
  cb();
}

export default compressImages;

このプラグインはsharpを使って画像を圧縮し、svgoで最適化を行なっています。jpeg、png、webp の各オプションは、そのままsharpに渡されます。同様に svg オプションはsvgoに渡されます。この例では、svgoの preset-default をカスタマイズしています。cleanupIds プラグインをオフに、 removeDimensions プラグインをオンにしています。

verbose をtrueに設定すると、各ファイルの圧縮結果を表示します。

注意事項

シャープによる画像圧縮を行なった結果、元のファイルサイズより大きくなる場合、このプラグインは圧縮結果ではなく、元のファイルをそのまま出力します。この動作を変更したい場合は、options.allowLargerOutput をtrueに設定してください。

API

imageCompress(options?)

options

パラメータ	型	デフォルト	説明
[options]	object		圧縮オプション
[options.jpeg]	object	{ quality: 80 }	sharpに渡すjpegオプション
[options.png]	object	{ quality: 80 }	sharpに渡すpngオプション
[options.webp]	object	{ quality: 80 }	sharpに渡すwebpオプション
[options.svg]	object	{ plugins: [ { name: 'preset-default' } ] }	svgoに渡すsvgオプション、デフォルトは preset-default
[options.allowLargerOutput]	boolean	false	元のファイルより大きい出力を許可するかどうか
[options.verbose]	boolean	false	各画像の圧縮結果をログ出力するかどうか