is template system working properly?

[miguelmoraleda]

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

[jkphl]

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

[jkphl]

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);

[miguelmoraleda]

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

[miguelmoraleda]

Hey @jkphl ,

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

[jkphl]

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

[miguelmoraleda]

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?

[jkphl]

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.

[miguelmoraleda]

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 👍

[jkphl]

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 ...

[miguelmoraleda]

Great! Thank you. It is working perfectly.

Not sure if you will need my test project

[jkphl]

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

[miguelmoraleda]

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

[jkphl]

Hey @miguelmoraleda,

sure! Here you are! ;)

Cheers,
Joschi

[miguelmoraleda]

Thank you!!