Transform method option to put generated image disk cache in .cache folder

[zachleat]

This works today to store output images into .cache/ and then copy those assets to the output folder post-build:

import fs from "node:fs";
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";

export default async function(eleventyConfig) {
	// Image optimization: https://www.11ty.dev/docs/plugins/image/#eleventy-transform
	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
		outputDir: ".cache/@11ty/img/",
		urlPath: "/img/built/",
	});

	eleventyConfig.on("eleventy.after", () => {
		fs.cpSync(".cache/@11ty/img/", "_site/img/built/", { recursive: true });
	});
}

Marginally related to 11ty/eleventy#3573

This is useful as some build servers persist .cache folder for you for free: https://www.11ty.dev/docs/deployment/#persisting-cache

[zachleat]

Here’s an example of the above only using .cache for full builds (not on serve/watch)

import fs from "node:fs";
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";

export default async function(eleventyConfig) {
	// Image optimization: https://www.11ty.dev/docs/plugins/image/#eleventy-transform
	let imageOptions = {};

	if(process.env.ELEVENTY_RUN_MODE === "build") {
		imageOptions.outputDir = ".cache/@11ty/img/";
		imageOptions.urlPath = "/img/built/";

		eleventyConfig.on("eleventy.after", () => {
			fs.cpSync(".cache/@11ty/img/", "_site/img/built/", { recursive: true });
		});
	}

	eleventyConfig.addPlugin(eleventyImageTransformPlugin, imageOptions);
}