自定义构建

目的和概述

Animate.css 的构建系统允许您：

仅包含您需要的特定动画
自定义 CSS 类前缀（默认为 animate__）
为开发或生产生成不同的输出格式

自定义构建需要克隆存储库并直接使用构建工具，因为这些工具不包含在 npm 包中。

来源： docsSource/sections/07-custom-builds.md1-20 package.json15-27

设置构建环境

无法直接从 npm 模块创建自定义构建。您需要克隆存储库并安装依赖项。

设置完成后，您可以运行 npm start 来生成三个输出文件：

文件	描述	目的
`animate.css`	未压缩	开发使用，易于阅读
`animate.min.css`	压缩版	生产使用，文件大小优化
`animate.compat.css`	压缩版，无类前缀	从旧版本迁移

来源： docsSource/sections/07-custom-builds.md5-19 package.json18-23

创建自定义动画集

自定义构建的主要好处是能够仅包含您需要的动画，从而减小文件大小。要自定义包含哪些动画，请执行以下操作：

编辑 ./source/animate.css 文件
删除不需要的 @import 语句
仅保留您计划使用的动画
运行 npm start 来生成您的优化构建。

例如，如果您只想使用一些引人注目的动画，您的 source/animate.css 文件可能看起来像这样：

通过排除未使用的动画，大大减小了文件大小。

来源： docsSource/sections/07-custom-builds.md21-37

自定义类前缀

默认情况下，所有动画类都使用 animate__ 前缀（例如，animate__bounce、animate__fadeIn）。您可以通过以下方式为自定义构建更改此前缀：

编辑 package.json 文件中的 animateConfig.prefix 属性
运行 npm start 来生成带有自定义前缀的构建。

例如，要将前缀更改为 my-anim__，您需要修改 package.json 文件。

运行 npm start 后，所有动画类都将使用您的自定义前缀（例如，my-anim__bounce 而不是 animate__bounce）。

来源： docsSource/sections/07-custom-builds.md39-56 package.json15-17 postcss.config.js18

构建流程技术细节

构建系统使用 PostCSS 和多个插件来处理源文件并生成输出文件。

构建流程执行以下步骤：

导入解析：将所有导入的 CSS 文件合并到一个文件中。
前缀应用：将配置的前缀添加到所有动画类。
浏览器兼容性：添加供应商前缀并处理 CSS 功能。
压缩：移除空格并优化 CSS（用于生产/兼容性构建）。
添加头部：添加许可证和版本信息。

每个命令都会生成不同的版本：

npm run raw：开发版本，不压缩。
npm run prod：生产版本，已压缩。
npm run compat：兼容性版本，无类前缀。

来源： postcss.config.js1-46 package.json18-30

了解输出格式

构建系统会生成三种不同的输出文件，每种文件都有特定的用途：

文件	类前缀	压缩版	目的
`animate.css`	是（`animate__`）	否	开发、调试
`animate.min.css`	是（`animate__`）	是	生产用途
`animate.compat.css`	否	是	遗留支持，迁移

这些文件之间的差异由传递给 PostCSS 配置的环境变量决定。

来源： postcss.config.js18-40 package.json18-23