From 3f45471b3d2c4aa8d6b1095987f2e73ebe88792b Mon Sep 17 00:00:00 2001 From: Zyie <24736175+Zyie@users.noreply.github.com> Date: Fri, 17 Feb 2023 12:59:41 +0000 Subject: [PATCH] feat(compress): Add webp compression (#18) --- packages/compress/README.md | 9 +++- packages/compress/src/webp.ts | 17 +++++- packages/core/src/config.ts | 5 +- packages/core/test/config.test.ts | 4 +- packages/manifest/test/Manifest.test.ts | 69 ++++++++++++++++++++----- 5 files changed, 86 insertions(+), 18 deletions(-) diff --git a/packages/compress/README.md b/packages/compress/README.md index 91243d1..c129e51 100644 --- a/packages/compress/README.md +++ b/packages/compress/README.md @@ -11,7 +11,7 @@ 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 { ... @@ -19,6 +19,7 @@ export default { ... 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 index 0380920..4555d4b 100644 --- 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 + { + 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 index 2865a04..faf2fda 100644 --- 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 index 0d7bbea..d315a7b 100644 --- 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 index 6151855..07dfe60 100644 --- 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/sprite@1x.png', 'bundle/sprite@0.5x.png'], + srcs: [ + 'bundle/sprite@1x.png', + 'bundle/sprite@0.5x.png', + 'bundle/sprite@0.5x.webp', + 'bundle/sprite@1x.webp', + ], data: { tags: { m: true, @@ -201,11 +208,16 @@ describe('Manifest', () => }, { name: ['spine/dragon.png'], - srcs: ['spine/dragon@1x.png', 'spine/dragon@0.5x.png'], + srcs: ['spine/dragon@1x.png', 'spine/dragon@0.5x.png', 'spine/dragon@0.5x.webp', 'spine/dragon@1x.webp'], }, { name: ['spine/dragon2.png'], - srcs: ['spine/dragon2@1x.png', 'spine/dragon2@0.5x.png'], + srcs: [ + 'spine/dragon2@1x.png', + 'spine/dragon2@0.5x.png', + 'spine/dragon2@0.5x.webp', + 'spine/dragon2@1x.webp', + ], }, { 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/sprite@1x.png', 'folder/sprite@0.5x.png'], + srcs: [ + 'folder/sprite@1x.png', + 'folder/sprite@0.5x.png', + 'folder/sprite@0.5x.webp', + 'folder/sprite@1x.webp', + ], }, { name: ['folder2/1.mp3', 'folder2/1'], @@ -352,7 +370,7 @@ describe('Manifest', () => }, { name: ['spine/dragon.png', 'dragon.png'], - srcs: ['spine/dragon@1x.png', 'spine/dragon@0.5x.png'], + srcs: ['spine/dragon@1x.png', 'spine/dragon@0.5x.png', 'spine/dragon@0.5x.webp', 'spine/dragon@1x.webp'], }, { name: [ @@ -361,7 +379,12 @@ describe('Manifest', () => 'dragon2.png', 'dragon2', ], - srcs: ['spine/dragon2@1x.png', 'spine/dragon2@0.5x.png'], + srcs: [ + 'spine/dragon2@1x.png', + 'spine/dragon2@0.5x.png', + 'spine/dragon2@0.5x.webp', + 'spine/dragon2@1x.webp', + ], }, { 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/sprite@1x.png', 'folder/sprite@0.5x.png'], + srcs: [ + 'folder/sprite@1x.png', + 'folder/sprite@0.5x.png', + 'folder/sprite@0.5x.webp', + 'folder/sprite@1x.webp', + ], }, { name: ['folder2/1.mp3'], @@ -503,11 +532,16 @@ describe('Manifest', () => }, { name: ['spine/dragon.png', 'dragon.png'], - srcs: ['spine/dragon@1x.png', 'spine/dragon@0.5x.png'], + srcs: ['spine/dragon@1x.png', 'spine/dragon@0.5x.png', 'spine/dragon@0.5x.webp', 'spine/dragon@1x.webp'], }, { name: ['spine/dragon2.png', 'dragon2.png'], - srcs: ['spine/dragon2@1x.png', 'spine/dragon2@0.5x.png'], + srcs: [ + 'spine/dragon2@1x.png', + 'spine/dragon2@0.5x.png', + 'spine/dragon2@0.5x.webp', + 'spine/dragon2@1x.webp', + ], }, { 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/sprite@1x.png', 'folder/sprite@0.5x.png'], + srcs: [ + 'folder/sprite@1x.png', + 'folder/sprite@0.5x.png', + 'folder/sprite@0.5x.webp', + 'folder/sprite@1x.webp', + ], }, { name: ['folder2/1.mp3', 'folder2/1'], @@ -652,14 +692,19 @@ describe('Manifest', () => }, { name: ['spine/dragon.png'], - srcs: ['spine/dragon@1x.png', 'spine/dragon@0.5x.png'], + srcs: ['spine/dragon@1x.png', 'spine/dragon@0.5x.png', 'spine/dragon@0.5x.webp', 'spine/dragon@1x.webp'], }, { name: [ 'spine/dragon2.png', 'spine/dragon2', ], - srcs: ['spine/dragon2@1x.png', 'spine/dragon2@0.5x.png'], + srcs: [ + 'spine/dragon2@1x.png', + 'spine/dragon2@0.5x.png', + 'spine/dragon2@0.5x.webp', + 'spine/dragon2@1x.webp', + ], }, { name: ['spine/dragon.atlas'],