如何向Angular CLI添加自定义构建步骤？

Question

目前似乎没有一种方法可以连接到 Angular CLI 底层使用的任何工具，以便构建/提供网站。

我想运行自己的图像优化脚本，但找不到在特定时间运行脚本或将我的代码添加到默认构建脚本的方法。

是否有推荐/规范的方法来实现这一点？

- dalanmiller

---

你是不是想说像 ng eject 这样的东西？ - junk

你是否正在尝试优化计划在网站上使用的图像？ - Ben Steward

没错！基本上是添加 imagemin 并创建 webp 版本等。 - dalanmiller

Answer 1

截至目前，Angular CLI不原生支持“pre”和“post”构建事件。但是你可以使用另外两个选项之一：

1. “pre/post” NPM脚本（更多详细信息：https://docs.npmjs.com/cli/v6/using-npm/scripts#pre--post-scripts）

{
  "prebuild": "additional calls",
  "build": "ng build"
}

转换到具有更多支持构建流水线的 Nx 工具（https://nx.dev/getting-started/intro），尤其是 "dependsOn" 属性，允许链接步骤。

示例：https://nx.dev/core-features/run-tasks#defining-the-task-pipeline

- Denys Vuika

Answer 2

如果您想要优化图像，那么您可以简单地运行脚本post-build并使用任何命令行工具处理dist文件夹中的资源。这是最简单和可靠的方法。

另一个选择是使用@angular-builders/custom-webpack，它允许修改webpack配置。您可能想查看当前的cli配置：https://github.com/angular/angular-cli/tree/main/packages/angular_devkit/build_angular/src/webpack/configs。

这可能会使升级Angular更加困难，而且angular-cli可能会潜在地转移到esbuild，@angular-builders/custom-webpack也将被放弃。

- kemsky