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.
と、エラーが出ます。
なので、importで読み込みたいところなのですが、Node.jsでimportを使うためには、なにかしらの工夫が必要です。
今回はファイル名を index.mjs にすることで解決しました。