feat(compress): Add webp compression (#18)

pixijs · Feb 17, 2023 · 3f45471 · 3f45471
1 parent 0c0274b
commit 3f45471
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 18 deletions.
diff --git a/packages/compress/README.md b/packages/compress/README.md
@@ -11,14 +11,15 @@ npm install --save-dev @assetpack/plugin-compress
 ## Usage
 
 ```js
-import { compressJpg, compressPng } from "@assetpack/plugin-compress";
+import { compressJpg, compressPng, compressWebp } from "@assetpack/plugin-compress";
 
 export default {
   ...
   plugins: {
     ...
     compressJpg: compressJpg(),
     compressPng: compressPng(),
+    compressWebp: compressWebp(),
   },
 };
 ```
@@ -36,3 +37,9 @@ export default {
 - compression: Any settings supported by [sharp](https://sharp.pixelplumbing.com/api-output#png)
 - `tags` - An object containing the tags to use for the plugin. Defaults to `{ nc: "nc" }`.
   - `nc` - The tag used to denote that the image should not be compressed. Can be placed on a folder or file.
+
+### compressWebp
+
+- compression: Any settings supported by [sharp](https://sharp.pixelplumbing.com/api-output#webp)
+- `tags` - An object containing the tags to use for the plugin. Defaults to `{ nc: "nc" }`.
+  - `nc` - The tag used to denote that the image should not be compressed. Can be placed on a folder or file.
diff --git a/packages/compress/src/webp.ts b/packages/compress/src/webp.ts
@@ -1,5 +1,5 @@
 import type { Plugin, PluginOptions } from '@assetpack/core';
-import { checkExt, hasTag } from '@assetpack/core';
+import { checkExt, hasTag, path, SavableAssetCache } from '@assetpack/core';
 import type sharp from 'sharp';
 import { sharpCompress } from './utils';
 
@@ -41,6 +41,21 @@ export function compressWebp(options?: CompressWebpOptions): Plugin<CompressWebp
             try
             {
                 await sharpCompress('webp', { input, processor, tree, compression: webpOpts, output });
+
+                const asset  = SavableAssetCache.get(tree.creator);
+                const trimmed = processor.trimOutputPath(output);
+
+                asset.transformData.files.forEach((f) =>
+                {
+                    const paths = f.paths.find((t) => t.includes(path.trimExt(trimmed)));
+
+                    if (paths)
+                    {
+                        f.paths.push(trimmed);
+                    }
+                });
+
+                SavableAssetCache.set(tree.creator, asset);
             }
             catch (error)
             {

diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts
@@ -13,8 +13,9 @@ export interface AssetPackConfig
       */
     ignore?: string[];
     /**
+      * EXPERIMENTAL
       * If true cached tree will be used
-      * @defaultValue true
+      * @defaultValue false
       */
     cache?: boolean;
     logLevel?: keyof typeof LogLevels;
@@ -32,7 +33,7 @@ export const defaultConfig: AssetPackConfig = {
     entry: './static',
     output: './dist',
     ignore: [],
-    cache: true,
+    cache: false,
     logLevel: 'info',
     plugins: {},
     files: []

diff --git a/packages/core/test/config.test.ts b/packages/core/test/config.test.ts
@@ -12,7 +12,7 @@ describe('AssetPack Config', () =>
             entry: path.join(process.cwd(), './static'),
             output: path.join(process.cwd(), './dist'),
             ignore: [],
-            cache: true,
+            cache: false,
             logLevel: 'info',
             plugins: {},
             files: []
@@ -37,7 +37,7 @@ describe('AssetPack Config', () =>
             entry: path.join(process.cwd(), 'src/old'),
             output: path.join(process.cwd(), 'dist/old'),
             ignore: ['scripts/**/*'],
-            cache: true,
+            cache: false,
             logLevel: 'info',
             plugins: {
                 test: plugin

diff --git a/packages/manifest/test/Manifest.test.ts b/packages/manifest/test/Manifest.test.ts
@@ -3,6 +3,7 @@ import { audio } from '@assetpack/plugin-ffmpeg';
 import { pixiManifest } from '@assetpack/plugin-manifest';
 import { mipmap, spineAtlasMipmap } from '@assetpack/plugin-mipmap';
 import { pixiTexturePacker } from '@assetpack/plugin-texture-packer';
+import { compressWebp } from '@assetpack/plugin-compress';
 // import { webfont } from '@assetpack/plugin-webfont';
 import { existsSync, readJSONSync } from 'fs-extra';
 import type { File } from '../../../shared/test';
@@ -118,6 +119,7 @@ describe('Manifest', () =>
                 mipmap: mipmap(),
                 spineAtlas: spineAtlasMipmap(),
                 manifest: pixiManifest(),
+                webp: compressWebp(),
             },
         });
 
@@ -149,7 +151,12 @@ describe('Manifest', () =>
                 },
                 {
                     name: ['bundle/sprite.png'],
-                    srcs: ['bundle/[email protected]', 'bundle/[email protected]'],
+                    srcs: [
+                        'bundle/[email protected]',
+                        'bundle/[email protected]',
+                        'bundle/[email protected]',
+                        'bundle/[email protected]',
+                    ],
                     data: {
                         tags: {
                             m: true,
@@ -201,11 +208,16 @@ describe('Manifest', () =>
                 },
                 {
                     name: ['spine/dragon.png'],
-                    srcs: ['spine/[email protected]', 'spine/[email protected]'],
+                    srcs: ['spine/[email protected]', 'spine/[email protected]', 'spine/[email protected]', 'spine/[email protected]'],
                 },
                 {
                     name: ['spine/dragon2.png'],
-                    srcs: ['spine/[email protected]', 'spine/[email protected]'],
+                    srcs: [
+                        'spine/[email protected]',
+                        'spine/[email protected]',
+                        'spine/[email protected]',
+                        'spine/[email protected]',
+                    ],
                 },
                 {
                     name: ['spine/dragon.atlas'],
@@ -310,6 +322,7 @@ describe('Manifest', () =>
                     createShortcuts: true,
                     trimExtensions: true,
                 }),
+                webp: compressWebp(),
             },
         });
 
@@ -336,7 +349,12 @@ describe('Manifest', () =>
                         'sprite.png',
                         'sprite',
                     ],
-                    srcs: ['folder/[email protected]', 'folder/[email protected]'],
+                    srcs: [
+                        'folder/[email protected]',
+                        'folder/[email protected]',
+                        'folder/[email protected]',
+                        'folder/[email protected]',
+                    ],
                 },
                 {
                     name: ['folder2/1.mp3', 'folder2/1'],
@@ -352,7 +370,7 @@ describe('Manifest', () =>
                 },
                 {
                     name: ['spine/dragon.png', 'dragon.png'],
-                    srcs: ['spine/[email protected]', 'spine/[email protected]'],
+                    srcs: ['spine/[email protected]', 'spine/[email protected]', 'spine/[email protected]', 'spine/[email protected]'],
                 },
                 {
                     name: [
@@ -361,7 +379,12 @@ describe('Manifest', () =>
                         'dragon2.png',
                         'dragon2',
                     ],
-                    srcs: ['spine/[email protected]', 'spine/[email protected]'],
+                    srcs: [
+                        'spine/[email protected]',
+                        'spine/[email protected]',
+                        'spine/[email protected]',
+                        'spine/[email protected]',
+                    ],
                 },
                 {
                     name: ['spine/dragon.atlas', 'dragon.atlas'],
@@ -466,6 +489,7 @@ describe('Manifest', () =>
                     createShortcuts: true,
                     trimExtensions: false,
                 }),
+                webp: compressWebp(),
             },
         });
 
@@ -487,7 +511,12 @@ describe('Manifest', () =>
                 },
                 {
                     name: ['folder/sprite.png', 'sprite.png'],
-                    srcs: ['folder/[email protected]', 'folder/[email protected]'],
+                    srcs: [
+                        'folder/[email protected]',
+                        'folder/[email protected]',
+                        'folder/[email protected]',
+                        'folder/[email protected]',
+                    ],
                 },
                 {
                     name: ['folder2/1.mp3'],
@@ -503,11 +532,16 @@ describe('Manifest', () =>
                 },
                 {
                     name: ['spine/dragon.png', 'dragon.png'],
-                    srcs: ['spine/[email protected]', 'spine/[email protected]'],
+                    srcs: ['spine/[email protected]', 'spine/[email protected]', 'spine/[email protected]', 'spine/[email protected]'],
                 },
                 {
                     name: ['spine/dragon2.png', 'dragon2.png'],
-                    srcs: ['spine/[email protected]', 'spine/[email protected]'],
+                    srcs: [
+                        'spine/[email protected]',
+                        'spine/[email protected]',
+                        'spine/[email protected]',
+                        'spine/[email protected]',
+                    ],
                 },
                 {
                     name: ['spine/dragon.atlas', 'dragon.atlas'],
@@ -612,6 +646,7 @@ describe('Manifest', () =>
                     createShortcuts: false,
                     trimExtensions: true,
                 }),
+                webp: compressWebp(),
             },
         });
 
@@ -636,7 +671,12 @@ describe('Manifest', () =>
                         'folder/sprite.png',
                         'folder/sprite',
                     ],
-                    srcs: ['folder/[email protected]', 'folder/[email protected]'],
+                    srcs: [
+                        'folder/[email protected]',
+                        'folder/[email protected]',
+                        'folder/[email protected]',
+                        'folder/[email protected]',
+                    ],
                 },
                 {
                     name: ['folder2/1.mp3', 'folder2/1'],
@@ -652,14 +692,19 @@ describe('Manifest', () =>
                 },
                 {
                     name: ['spine/dragon.png'],
-                    srcs: ['spine/[email protected]', 'spine/[email protected]'],
+                    srcs: ['spine/[email protected]', 'spine/[email protected]', 'spine/[email protected]', 'spine/[email protected]'],
                 },
                 {
                     name: [
                         'spine/dragon2.png',
                         'spine/dragon2',
                     ],
-                    srcs: ['spine/[email protected]', 'spine/[email protected]'],
+                    srcs: [
+                        'spine/[email protected]',
+                        'spine/[email protected]',
+                        'spine/[email protected]',
+                        'spine/[email protected]',
+                    ],
                 },
                 {
                     name: ['spine/dragon.atlas'],