Issue with routes

[Avcajaraville]

Hi !

Im also struggeling with this issue. Im not able to archieve what I want. Sometimes, the files got generated properlly, and some other, they are not.

When seems that everything works nice. Im having problems with the url on the generated scss.

I want to generate svg sprites for two part of my app: public and admin. They have different structure.

So, lets have a look to my folder structure first.

|
|-> front-end // Here, I store all scss, gulp files, etc
|     |
|     |-> gulp
|     |     |
|     |     |-> tasks
|     |           |
|     |           |-> graphics
|     |           |     |
|     |           |     |-> svg-sprites.js // gulp task with gulp-svg-sprite
|     |           |
|     |           |-> config.js // config file for gulp
|     |
|     |-> m-scss // folder with my scss files
|     |     |
|     |     |-> admin
|     |           |
|     |           |-> sprites
|     |           |     |
|     |           |     |-> _admin-sprites.scss // Here is where I want to have outputted the svg sprite's scss regarding to admin
|     |           |
|     |           |-> sprites
|     |                 |
|     |                 |-> _sprites.scss // Here is where I want to have outputted the svg sprite's scss regarding to public area
|     |
|     |-> gulpfile.js
|
|
|-> web // public folder of the app
      |
      |-> admin-assets
      |     |
      |     |-> icons // Folder with all svg for admin area
      |     |
      |     |-> generated // Folder with the generated svg sprite for admin area
      |           |
      |           |-> admin-sprite.svg // Generated svg sprite for admin area
      |
      |-> m-img
            |
            |-> svgs // Folder with all svg for public area
            |
            |-> generated
                  |
                  |-> svg-sprites // Folder with the generated svg sprite for public area
                        |
                        |-> sprite.svg // Generated svg sprite for public area

This are my two tasks (on front-end/gulp/tasks/graphics/svg-sprites.svg );

gulp.task( 'svg-sprites', function () {
  return gulp.src( config.source )
    .pipe( changed( config.destination ) )
    .pipe( svgSprite( config.gulpSvgSpritesSettings ) )
    .pipe( gulp.dest( config.destination ) );
});

gulp.task( 'admin-svg-sprites', function () {
  return gulp.src( config.adminSource )
    .pipe( changed( config.adminSpritesDestination ) )
    .pipe( svgSprite( config.gulpSvgSpritesAdminSettings ) )
    .pipe( gulp.dest( config.adminSpritesDestination ) );
});

And these my (wrong) config file:

    config : {
        source : '../web/m-img/svgs/**/*.svg',
        destination : '../web/m-img/generated/svgs',
        gulpSvgSpritesSettings :
        {
            shape : 
            {
                spacing : 
                { 
                    padding : 5 
                }
            },
            mode : 
            {
                css : 
                {
                    dimensions : true,
                    common : 'svg-icon',
                    prefix : 'icon-',
                    bust : false,
                    sprite : '../sprite.svg',
                    render : 
                    {
                        scss    : 
                        { 
                            dest : '../../../../../front-end/m-scss/sprites/_sprites-svg.scss',
                        }
                    }
                }
            }
        },
        adminSource : '../web/admin-assets/icons/**/*.svg',
        adminSpritesDestination : '../web/admin-assets/generated',
        gulpSvgSpritesAdminSettings :
        {
            shape : 
            {
                spacing : 
                { 
                    padding : 5 
                }
            },
            mode : 
            {
                css : 
                {
                    dimensions : true,
                    common : 'svg-icon',
                    prefix : 'icon-',
                    bust : false,
                    sprite : '../../../../admin-assets/generated/admin-sprites.svg',
                    render : 
                    {
                        scss    : 
                        { 
                            dest : '../../../../front-end/m-scss/admin/sprites/_admin-sprites-svg.scss',
                        }
                    }
                }
            }
        },
    }

I really have a problem trying to understand how the routes works and how to archieve what Im looking for.

Any help will be very appreciated.

Thanks a lot !

[1stevengrant]

Here's my Gulp task & setup

config                  = {
    mode                : {
        view            : {
            sprite      : '../svg/sprite.view.svg',
                dest                : '.',
            bust        : false,
            example     : true,
            render      : {
                scss    : {
                    dest    : '../../src/scss/_svgsprite.scss'
                }
              }
        }
    }
};

gulp.task('svgsprite', function() {
  gulp.src('**/*.svg', { cwd: './src/lib/svgsprite'})
    .pipe(plumber(plumberErrorHandler))
    .pipe(svgSprite(config))
    .pipe(gulp.dest('./public/build'));
});

This takes svgs from src/lib/svgsprite and puts the sprite into public/build/svg and it places the Sass partial into src/scss.

I wonder if your gulpSvgSpritesAdminSettings is causing it problems. I'd probably have 2 separate configs.

[Avcajaraville]

Im actually have two different config files. The problem for me its which file route is relative to another, etc, etc... Its very confusing for me ...

[jkphl]

@Avcajaraville Please refer to #12 — I explained it in detail over there.