如何将Gulp任务添加到Angular CLI构建中

Question

我将我的Angular 4项目的部署工具切换到angular/cli。命令ng build将默认把生成的捆绑文件放在dist文件夹中。

我需要弄清楚如何将我的自定义任务添加到这个过程中。具体来说，我有很多.svg文件需要捆绑和压缩成一个sprite.defs.svg文件，并将结果放置在dist/assets/svg/中。在之前的部署工具链中，我使用了gulp和gulp-svg-sprite插件。这是我的捆绑步骤:

const svgSprite = require('gulp-svg-sprite');

gulp.src('**/*.svg')
  .pipe(svgSprite({
    mode: {
      defs: {
        dest:'.',
        sprite:"sprite.defs.svg"
      }
    }
  }))
  .pipe(gulp.dest('dist/assets/svg'));

有没有一种简单的方法将这样的东西集成到 angular/cli 的 ng build 中？

- BeetleJuice

Answer 1

假设你手动运行这个 Gulp 任务：

gulp processSVG

在 package.json 的 scripts 部分，定义一个像这样的命令：

"prebuild": "gulp processSVG"

npm脚本足够智能，会在使用相同名称但没有"pre"前缀的命令之前运行带有"pre"前缀的命令。现在，请运行以下命令：

npm run build

这个命令将首先运行预构建命令，然后再运行构建命令。

- Yakov Fain

---

谢谢。运行npm脚本后是否有镜像约定？例如："postbuild": "..."。实际上，我需要在构建之后运行我的任务...刚刚测试过了，确实是这样。再次感谢。 - BeetleJuice

是的，postbuild 将在构建完成后立即运行命令。pre 和 post 可与任何命令一起使用。 - Yakov Fain

Answer 2

还有另一种方法可以完成这个任务，设置你的ngbuild选项，然后添加" && gulp "和gulp任务，如下所示：

"scripts":{
    "buildDev": "ng build --deleteOutputPath=true --sourceMap=true && gulp your-task"
}

我可以确认@Yakov Fain的解决方案在Angular 7中仍然有效，就像我的一样。

- J King