feat: add image optimization preset (#84)

* add imagemin plugin and optimize preset
also remove pngquant and svgo

* weird autocomplete

* fix imagemin impl

* update docs

* update lockfile

docs/plugins/imagemin.md

@@ -0,0 +1,33 @@
+# imagemin
+
+A plugin to optimize your images.
+
+## Install
+
+    npm i magefront-plugin-imagemin --save-dev
+
+## Usage
+
+```js
+import imagemin from 'magefront-plugin-imagemin'
+
+export default {
+    plugins: [
+        imagemin()
+    ]
+}
+```
+
+## Options
+
+### `src`
+
+The source images to minify. Default is `**/*.{jpg,jpeg,png,gif,svg}`.
+
+### `ignore`
+
+A list of paths to ignore.
+
+### `plugins`
+
+A list of plugins to use.

docs/presets/optimize.md

@@ -0,0 +1,31 @@
+# Optimize preset
+
+An additional preset to optimize your assets.
+
+It supports the following image formats:
+
+- jpg
+- png
+- gif
+- svg
+- webp
+
+## Install
+
+    npm i magefront-preset-optimize --save-dev
+
+## Usage
+
+```js
+import optimizePreset from 'magefront-preset-optimize'
+
+export default {
+    presets: [
+        optimizePreset()
+    ]
+}
+```
+
+## Plugins
+
+- [magefront-plugin-imagemin](plugins/imagemin.md)

packages/plugin-imagemin/README.md

@@ -0,0 +1,19 @@
+# magefront-plugin-imagemin
+
+Optimize images with [imagemin](https://github.com/imagemin/imagemin).
+
+## Install
+
+    npm i magefront-plugin-imagemin
+
+## Usage
+
+```js
+import imagemin from 'magefront-plugin-imagemin'
+
+export default {
+  plugins: [imagemin()],
+}
+```
+
+See the [documentation](https://ubermanu.github.io/magefront/#/plugins/imagemin) for more information.

packages/plugin-svgo/package.json → packages/plugin-imagemin/package.json

@@ -1,16 +1,18 @@
 {
-  "name": "magefront-plugin-svgo",
-  "version": "1.2.2",
+  "name": "magefront-plugin-imagemin",
+  "version": "1.0.0",
   "keywords": [
     "magefront",
     "magento",
     "theme",
-    "plugin"
+    "plugin",
+    "imagemin",
+    "image"
   ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ubermanu/magefront.git",
-    "directory": "packages/plugin-svgo"
+    "directory": "packages/plugin-imagemin"
   },
   "license": "MIT",
   "author": "Emmanuel Vodor <[email protected]>",
@@ -33,7 +35,10 @@
   },
   "dependencies": {
     "fast-glob": "^3.3.1",
-    "svgo": "^3.0.2"
+    "imagemin": "^8.0.1"
+  },
+  "devDependencies": {
+    "@types/imagemin": "^8.0.1"
   },
   "peerDependencies": {
     "magefront": "workspace:^"

packages/plugin-imagemin/src/plugin.ts

@@ -0,0 +1,46 @@
+import glob, { type Pattern } from 'fast-glob'
+import type { Plugin as ImageMinPlugin } from 'imagemin'
+import imagemin from 'imagemin'
+import type { Plugin } from 'magefront'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+
+export interface Options {
+  src?: string | string[]
+  ignore?: Pattern[]
+  dest?: string
+  plugins?: ImageMinPlugin[]
+}
+
+/** Optimizes images using imagemin. */
+export default (options?: Options): Plugin => {
+  const { src, ignore, dest, plugins = [] } = { ...options }
+
+  return async (context) => {
+    const files = await glob(src ?? '**/*.{jpg,jpeg,png,gif,svg}', {
+      cwd: context.src,
+      ignore,
+    })
+
+    const result = await imagemin(
+      files.map((file) => path.join(context.src, file)),
+      {
+        plugins,
+      }
+    )
+
+    context.logger.info(`Optimized ${result.length} images.`)
+
+    // For each optimized image, write it to the destination.
+    await Promise.all(
+      result.map(async (file) => {
+        // Remove the absolute context.src path from the file's source path.
+        const sourcePath = path.relative(context.src, file.sourcePath)
+        const filePath = path.join(context.src, dest ?? '', sourcePath)
+
+        // Write the optimized image to the destination.
+        await fs.writeFile(filePath, file.data, 'utf8')
+      })
+    )
+  }
+}