如何将 gulp 任务添加到 Angular cli 构建答案

【问题标题】：How to add gulp task to angular cli build如何将 gulp 任务添加到 Angular cli 构建
【发布时间】：2017-12-09 13:52:48
【问题描述】：

我正在将 Angular 4 项目的部署工具切换到 angular/cli。默认情况下，ng build 命令会将生成的包放在 dist 文件夹中。

我需要弄清楚如何将我的自定义任务添加到此流程中。具体来说，我有很多.svg 文件，我需要将它们打包并缩小到sprite.defs.svg 文件中，并将结果放在dist/assets/svg/ 中。在我之前的部署工具链中，我使用了gulp 和gulp-svg-sprite plugin。这是我的捆绑步骤：

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 中？

【问题讨论】：

标签： angular deployment gulp angular-cli bundling-and-minification

【解决方案1】：

说，你手动运行这个 gulp 任务

gulp processSVG

在 package.json 的脚本部分，定义如下命令：

"prebuild": "gulp processSVG"

npm 脚本足够聪明，可以在具有相同名称但没有此前缀的命令之前运行带有“pre”前缀的命令。现在，运行以下命令：

npm run build

此命令将先运行 prebuild 命令，然后运行 build 命令。

【讨论】：

谢谢。在 npm 脚本之后运行某些东西是否有镜像约定？例如："postbuild": "..."。我实际上需要在构建之后运行我的任务......刚刚测试过，就是这样。再次感谢。
是的，postbuild 将在构建后立即运行命令。 pre 和 post 可以使用任何命令。

【解决方案2】：

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

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

我可以确认@Yakov Fain 的解决方案仍然适用于 angular 7 以及我的

【讨论】：