如何处理资源

使用 Lume 处理资源 (编译, 压缩等)

在上一步中，我们学习了如何将文件复制到 _site 文件夹。我们还提到 Lume 有两种处理资源的方式，复制是最简单的一种。

复制文件不仅是最简单的方式，也是最快的，因为 Lume 不需要将文件内容加载到内存中。它只是将文件复制到 _site 文件夹，这是一个快速的操作。

另一种处理资源的方式是加载它们。如果你想以某种方式修改内容，这将非常有用。一个典型的用例是如果我们想要转换（transpile）内容（例如加载 SASS 文件并将其转换为 CSS）或压缩（minify）它们。

这是一个稍微复杂的操作，因为我们需要配置 Lume 加载这些文件（以便它们存储在内存中），并告诉 Lume 一旦加载后我们想对这些内容做什么。Lume 有两个函数可以做到这一点：loadAssets() 和 process()。

压缩 CSS 代码

假设我们要压缩我们在上一步中创建的 styles.css 文件。我们可以使用以下代码来实现：

import lume from "lume/mod.ts";

const site = lume();

// 配置 Lume 加载所有 .css 文件
site.loadAssets([".css"]);

// 用于压缩 CSS 的基本函数
function minifyCSS(css: string) {
  return css
 .replaceAll("\n", " ")
 .replaceAll(/\s+/g, " ")
 .replaceAll(/([:;{])\s/g, "$1");
}

// 使用我们的 minifyCSS 函数处理所有 .css 文件
site.process([".css"], (assets) => {
  for (const asset of assets) {
 asset.content = minifyCSS(asset.content as string);
 }
});

export default site;

这段代码中有很多内容！第一个有趣的部分是 loadAssets()，它用于配置 Lume 加载某些文件扩展名到内存中。该函数接受一个我们想要加载的扩展名数组，所以我们传递了一个包含 .css 扩展名的数组。

在上一步中添加的代码 site.copy("/styles.css") 被移除了。这是因为复制文件优先于加载文件。所以，如果我们想要 Lume 加载 styles.css 文件，它就不能被复制（Lume 不能同时做这两件事）。

处理代码

我们还创建了 minifyCSS 函数来移除 CSS 代码中不必要的空格和换行符。这是一个 用于演示目的的基本函数。有很多你可以使用的开源包，它们会做得更好。我们想保持这个演示的简洁性，所以我们自己创建了一个简单的函数。

最后，我们使用 process() 函数来处理 CSS 文件。该函数接受一个我们想要处理的扩展名数组和一个回调函数，该回调函数在第一个参数中接收所有与这些扩展名匹配的资源。我们使用 minifyCSS 函数来修改变量 asset.content，内容就存储在这个变量中。

Tip

处理器是 Lume 最强大的功能之一。你可以在 处理器文档 中了解更多信息。

正如你所看到的，与复制文件相比，在 Lume 中加载和处理文件需要更多的工作和对 Lume 底层工作原理的理解。幸运的是，Lume 有一个强大的插件系统，可以隐藏所有这些复杂性，并使这些任务更容易。让我们在下一步中看看它们！

编辑此页