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?

Yakov Fain · Accepted Answer · 2017-07-05 20:04:59Z

11

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.

answered Jul 5, 2017 at 20:04

Yakov Fain

12.4k5 gold badges35 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BeetleJuice Over a year ago

Thank you. Is there a mirror convention for running something after an npm script? eg: "postbuild": "...". I actually need my task to run after the build... just tested and it's exactly that. Thanks again.

Yakov Fain Over a year ago

Yes, postbuild will run the command right after the build. The pre and post work with any command.

J King · Accepted Answer · 2018-11-18 22:20:45Z

1

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

answered Nov 18, 2018 at 22:20

J King

4,51610 gold badges61 silver badges118 bronze badges

Collectives™ on Stack Overflow

How to add gulp task to angular cli build

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related