is template system working properly?

[Miguel Moraleda]

Hi @jkphl,

Sorry, it is me again.

I'm trying to use the template configurations, but it is not working for me. I'm not sure if I'm using it in the right way. Could you give me an example?

Looks like there is a problem with the path reference. With my example... it is trying to search from the myproject/node_modules/grunt-svg-sprite/node_modules/svg-sprite/

My code:

svg_sprite: {
    dev: {
        expand: true,
        cwd: '<%= config.src %>/assets/svg/',
        src: ['**/*.svg'],
        dest: '<%= config.dev %>/images/',
        options: {
            mode: {
                defs: {
                    bust: false,
                    dest: ''
                },
                css: {
                    bust: false,
                    dest: '',
                    render      : {
                        less    : true
                    },
                    example: {
                        template: '<%= config.src %>/less/sprites/spriteTemplate.less',
                        dest: '../../<%= config.src %>/less/sprites/sprite'
                    }
                }
            },
            transform: [
                {svgo: {
                    plugins: [
                        { removeViewBox: false }, 
                        { removeUselessStrokeAndFill: false }, 
                        { cleanupIDs: false }, 
                        { mergePaths: false }
                    ]
                }}
            ],
            svg: {
                namespaceIDs: false,
                doctypeDeclaration: false,
                xmlDeclaration: false
            }

        }
    }
}

I hope you can help me to figure out what I'm doing wrong.

Thanks in advance.

Best regards,

Miguel

[Joschi Kuphal]

Hi @miguelmoraleda,

I see. It looks like this is a problem that only occurs when svg-sprite is used as a dependency. Could you please try to follow these steps:

• Open the file myproject/node_modules/grunt-svg-sprite/node_modules/svg-sprite/lib/svg-sprite/mode/css.js
• Replace the lines 38 - 45 with this:

            var renderConfig        = {
                template            : path.resolve(path.join('tmpl', 'css', 'sprite.' + extension)),
                dest                : path.join(this.config.dest, 'sprite.' + extension)
            };
            if (_.isObject(this.config.render[extension])) {
                if ('template' in this.config.render[extension]) {
                    renderConfig.template       = path.resolve(this.config.render[extension].template);

• Retry

Does this work for you then? Thanks for your help and sorry for the inconveniences.

Cheers,
Joschi

[Joschi Kuphal]

Sorry, once more — please use this for replacing the lines 38 - 45:

            var renderConfig        = {
                template            : path.resolve(path.dirname(path.dirname(path.dirname(__dirname))), path.join('tmpl', 'css', 'sprite.' + extension)),
                dest                : path.join(this.config.dest, 'sprite.' + extension)
            };
            if (_.isObject(this.config.render[extension])) {
                if ('template' in this.config.render[extension]) {
                    renderConfig.template       = path.resolve(this.config.render[extension].template);

[Miguel Moraleda]

hey @jkphl,

It doesn't works. It is still looking from the same path. (node_modules/....)

I will try to help you to find why is that and let you know ASAP.

Cheers

[Miguel Moraleda]

Hey @jkphl ,

So sorry. It is working... My config was wrong.

[Joschi Kuphal]

Oh great! So I will release that lines along with the next release! Thanks for your help! :)

[Miguel Moraleda]

Well, I still have an issue.

Maybe it is because my configuration is wrong. I would like to double check with you.

Now I have this config.

render      : {
    less    : {
        dest: '../../<%= config.src %>/less/sprites/sprite.less'
    },
    example: {  
        template: '<%= config.src %>/less/sprites/spriteTemplate.less'
    }
}

But it is creating a sprite.example file in a no desired folder. This file contains the "templated" function.

.() {
    background-repeat: no-repeat;
    background-image: url('@{images}svg/sprite.css.svg');
}

And the .less file is in the right position but it is not "templated".

Any idea?

[Joschi Kuphal]

Could you please send me your Gruntfile.js and your assets (SVG files plus LESS templates in their original directory structure) via email. It's hard to debug on a theoretical basis. Also, I'm at home right now, without my full working environment, so it might take me until tomorrow to respond.

[Miguel Moraleda]

Sure, I will create a test project for you.

But anyways. I think it is a problem with my configuration in the Gruntfile. Also maybe I couldn't explain it in a good way.

What I'm trying to achieve is to create the .less file with a given template.

If I have this as base for the creation of the .less file. What's the way to set the template?

css: {
    bust: false,
    dest: '',
    render      : {
        less    : {
            dest: '../../<%= config.src %>/less/sprites/sprite.less'
        }
    }
}

By the way. Thank you very much for your help in your free days 👍

[Joschi Kuphal]

No worries! However, which free days are you talking about? :D

You should be able to specify a template like this:

css: {
    bust: false,
    dest: '',
    render      : {
        less    : {
            template: 'path/to/template.less'
            dest: 'path/to/sprite.less'
        }
    }
}

Please be aware that the template path is relative to the root directory of your project (i.e. where also the Gruntfile.js resides) and the dest path relative to your output directory (which is dest + css.dest).

Waiting for your test project ...

[Miguel Moraleda]

Great! Thank you. It is working perfectly.

Not sure if you will need my test project

[Joschi Kuphal]

Cool! So if it does work for you now, then I don't need a test project as there's no problem to solve anymore! ;)

Cheers, Joschi

[Miguel Moraleda]

Hey @jkphl,

I will appreciate if you could release a new version containing the changes to css.js. I'm working with more developers in the project and apply the hotfix is a little bit painful for the rest of the team.

If you think it is not enough to make a new release, just let me know, so I can find another solution.

Thanks in advance.

Best regards,
Miguel

[Joschi Kuphal]

Hey @miguelmoraleda,

sure! Here you are! ;)

Cheers,
Joschi

[Miguel Moraleda]

Thank you!!