K
K
Kirill2020-07-13 00:37:44
JavaScript
Kirill, 2020-07-13 00:37:44

Why is gulp task not working correctly?

I'm trying to assemble an svg sprite from several svg files.
If you enter gulp svgSpriteBuild in the terminal, then the task creates an empty symbol_sprite.html file without adding icons there, but should add them there, wrap them in symbol tags and remove fill. I would be grateful if you tell me what I'm doing wrong?

The code:

gulp.task('svgSpriteBuild', function () {
  return gulp.src('#src/img/iconsprite/*.svg')
    // minify svg
    .pipe(svgmin({
      js2svg: {
        pretty: true
      }
    }))
    // remove all fill and style declarations in out shapes
    .pipe(cheerio({
      run: function ($) {
        $('[fill]').removeAttr('fill');
        $('[style]').removeAttr('style');
      },
      parserOptions: { xmlMode: true }
    }))
    // cheerio plugin create unnecessary string '>', so replace it.
    .pipe(replace('>', '>'))
    // build svg sprite
    .pipe(svgSprite({
        mode: "symbols",
        preview: false,
        selector: "icon-%f",
        svg: {
          symbols: 'symbol_sprite.html'
        }
      }
    ))
    .pipe(gulp.dest('#src/'));
});


Folder structure:
#src/
____img/
_______iconsprite/ (all svg icons are there)
____scss/
index.html
symbol_sprite.html
dist/

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question