如何将gulp任务添加到角度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 ？

Answer 1

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

gulp processSVG

在package.json的scripts部分中，定义如下命令：

"prebuild": "gulp processSVG"

npm脚本非常智能，可以在具有相同名称但没有此前缀的命令之前使用“pre”前缀运行命令。 现在，运行以下命令：

npm run build

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

Answer 2

还有另一种方法可以实现这一点，并设置你的ngbuild选项，然后添加“&& gulp ”和你的gulp任务，如下所示：

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

我可以确认@Yakov Fain的解决方案仍适用于角7和我的