Y
Y
Yuri Uvarov2017-07-12 22:00:02
gulp.js
Yuri Uvarov, 2017-07-12 22:00:02

SvgSprite gulp how to correctly write the path from the root?

.pipe(svgSprite({
        mode: {
            symbol: {
                sprite: "../sprite.svg",
                render: {
                    scss: {
                        dest: "C:/Users/User/Desktop/gulp/src/style/partials/sprite.scss",
                        template: "./bower_components/sprite/sprite_template.scss"
                    }
                }
            }
        }
    }))

Structure:
build
-img
src
-style
--partials
by default scss and the sprite itself is unloaded to dest (build / img)
You need to scatter 2 files in different places leave the sprite in build / img and scss in src / style / partials
Option number 1: (does not work, throws an error in the console)
../../../src/style/partials/
Error:
TypeError: Cannot read property 'sockets' of undefined

Option number 2: (works, but it can definitely be done more correctly)
C:/Users/User/Desktop/gulp/src/style/partials/sprite.scss

Tell me how to prescribe the path more correctly?
PS I didn't find anything in the documentation of the plugin itself, don't send it to Google, thanks.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
M
Makar Gerasimov, 2017-07-13
@fergussawyer

Instead of writing an absolute path, use __dirname if necessary.

S
sergey, 2017-07-12
@zorro76

I have it organized a little differently:

var src = {
     svgsprite: ['./src/img/icons/sprites/*.svg']
    },

gulp.task('svgsprite', function() {
    return gulp.src(src.svgsprite)
        .pipe(svgSprite(config = {
            preview: false,
            selector: "icon-%f",
            cssFile: "_svgsprite.scss",
            svg: {
                sprite: "img/sprite.svg"
            },
            dimension       : {
                maxWidth    : 32,
                maxHeight   : 32
            },
            baseSize: 32
        }))
        .pipe(gulp.dest('./src/sass'))
        .pipe(connect.reload())
});

gulp.task('svgsprite-clean', function (cb) {
    del(['./src/sass/img/sprite.svg','./src/sass/_svgsprite.scss'], cb);
});

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question