How to add gulp task to angular cli build

user_3977061 0
Viewed 4907

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?

bundling-and-minification angular-cli gulp angular deployment
2 Answers

There is another way to accomplish this as well set your ngbuild options and then add " && gulp " and your gulp task like follows:

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

I can confirm that @Yakov Fain's solution still works with angular 7 as well as mine

user_18543820
Related