How to add gulp task to angular cli build

Question

I'm switching my deployment tool for an Angular 4 project to angular/cli. The command ng build will put the resulting bundles in a dist folder by default.

I need to figure out how to add my custom task to this process. Specifically, I have a lot of .svg files that I need to bundle and minify into a sprite.defs.svg file, and place the result in dist/assets/svg/. With my previous deployment toolchain, I used gulp with the gulp-svg-sprite plugin. Here was my bundling step:

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

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

Is there a simple way to integrate something like this into angular/cli's ng build?

Answer 1

Say, you manually run this gulp task as

gulp processSVG

In the scripts section of package.json, define a command like this:

"prebuild": "gulp processSVG"

npm script is smart enough to run the command with the "pre" prefix before the command with the same name, but without this prefix. Now, run the following command:

npm run build

This command will run the prebuild command first and then the build command.