imageminとimagemin-pngquantを使ってPNG画像を軽量化する 🖼

imagemin と imagemin-pngquant を使って、ディレクトリ内のPNG画像をまるっと軽量化するスクリプトを書きます。

www.npmjs.com
www.npmjs.com

実装方法

❶ 必要なパッケージをインストールします

yarn add -D imagemin imagemin-pngquant

❷ distディレクトリ、srcディレクトリ、index.mjsを作成します

❸ index.mjsを編集します

import imagemin from 'imagemin';
import imageminPngquant from 'imagemin-pngquant';

imagemin(['src/*.png'], {
  plugins: [ imageminPngquant() ],
  destination: 'dist'
}).then(() => {
  console.log('done!');
});

❹ package.jsonを編集します

{
  "name": "imagemin",
  "version": "1.0.0",
  "main": "index.mjs",
  "scripts": {
    "start": "node index.mjs"
  },
  "devDependencies": {
    "imagemin": "^8.0.1",
    "imagemin-pngquant": "^9.0.2"
  }
}

これでOKです。

yarn start

を実行すると、srcディレクトリ内のPNG画像を軽量化してdistディレクトリに書き出します。

注意事項

imageminをrequireで読み込もうとすると、

const imagemin = require('imagemin');
                 ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /imagemin/node_modules/imagemin/index.js from /imagemin/index.js not supported.
Instead change the require of /imagemin/node_modules/imagemin/index.js in /imagemin/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/imagemin/index.js:1:18) {
  code: 'ERR_REQUIRE_ESM'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.