如何将 gulp 任务添加到 angular cli 构建

Question

我正在将 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 中？

Answer 1

比如说，你手动运行这个 gulp 任务作为

gulp processSVG

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

"prebuild": "gulp processSVG"

npm script 足够聪明，可以在同名命令之前运行带有 "pre" 前缀的命令，但没有此前缀。现在，运行以下命令：

npm run build

此命令将运行先是预构建命令，然后是构建命令。

Answer 2

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

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

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

如何将 gulp 任务添加到 angular cli 构建

How to add gulp task to angular cli build

angular

deployment

gulp

angular-cli

bundling-and-minification