svg-sprite/grunt-svg-sprite

Task runs, but not compile something

kirylrb opened this issue · 8 comments

Hello.

Stunned with trouble, pleased somebody to help.
Firstly, scirpt runs only with expand:true option.
Secondly, when it even runned with no-errors, there are no compiled css neither svg-sprite.
Terminal log is clear so I just dont know what happened that task just runs in 18ms with no result.
Tried to comment options, but also no result.

Ubuntu 15.10
Node 4.1 stable

screenshot from 2015-10-15 17-37-36

 svg_sprite      : {
        options     : {
            // Task-specific options go here.
        },
        icons : {
            // Target-specific file lists and/or options go here.
            expand      : true,
            cwd         : '<%= config.app %>/styles/common/.',
            src         : ['<%= config.app %>/images/icons/*.svg'],
            dest        : '<%= config.app %>/images/svg_sprite',
            // options     : {
            //     // Target-specific options
            //     symbol          : true,
            //     spacing         : {         // Add padding
            //         padding     : 10
            //   },
            // }
        },
    },

jkphl commented

It's probably a config problem. Please ensure

  1. that cwd is a valid path on your file system, and
  2. that src is a valid globbing pattern relative to cwd matching your SVG files (e.g. **/*.svg).

Of course expand needs to be true for cwd to work, please see the relevant Grunt documentation sections for details.

Hope this helps. Cheers, Joschi

Now I wrote absolute path and have funny message.

Running "svg_sprite:icons" (svg_sprite) task
>> Source file "/*/app/images/icons/arrow_caption.svg" not found.
>> Source file "/*/app/images/icons/arrow_view_all.svg" not found.

...

Warning: SVG sprite compilation failed with message: 
ArgumentError: SVGSpriter.compile: "{}" is not a valid mode configuration 
Use --force to continue.

Aborted due to warnings.

So, it see filenames, but not see files themselves.

Config is:

cwd         : '.',
src         : ['/*/app/images/icons/*.svg'],
dest        : '/*/app/images/svg_sprite',

Let me describe how I understand config:
cwd - root of src directory
src - sources with many SVG icons
dest - place to compiled svg sprite (not necessary to write path with filename, right?)

Sure it's kind a strange problem, but I am pretty comfortable with another grunt task dealing so I am just don't understand what kind of path could be wrong.

Thanks.

jkphl commented

I'm not sure whether /*/app/images/icons/*.svg is valid for the src property. Please try stripping off the leading /.

dest - place to compiled svg sprite (not necessary to write path with filename, right?)

Right, without the filename, just a directory.

Joschi, I've finally compiled sprites with empty cwd!

cwd         : '',
src         : ['<%= config.app %>/images/icons/*.svg'],
dest        : '<%= config.app %>/images/svg_sprite',

One another question - is it possible to keep styles and sprites in different dest fodlers?

If you intersted, there is a js-way exist to include icons on page: https://github.com/mistakster/grunt-svg2string

thanks!

jkphl commented

Hey @craft37,

glad that it works for you now.

One another question - is it possible to keep styles and sprites in different dest fodlers?

Sure! Your CSS files will be rendered to mode.<mode>.dest, while there's mode.<mode>.sprite to control the sprite location (relative to mode.<mode>.dest). Please see the chapter about output destinations for more details.

Cheers, Joschi

Sorry, I dont got from docs - could I configure separate dests from grunt or I need to use it in 'manual ' way?

jkphl commented

All the configuration options are shared between the Grunt, Gulp and Node version of svg-sprite. You may also always use the online kickstarter to create your config.

Ow, nice option witch config-kickstarter.
thank you.