简体   繁体   English

使用grunt模块创建svg sprite

[英]Creating svg sprites using grunt module

I'm new to grunt and node js. 我是grunt和node js的新手。 I'm facing issues in creating svg sprites using grunt-svg-sprite module. 我在使用grunt-svg-sprite模块创建svg sprites时遇到了问题。 I have used grunt-svg-sprite module to create svg sprite image. 我用grunt-svg-sprite模块来创建svg精灵图像。 I have installed the grunt-svg-sprite module using the following command. 我使用以下命令安装了grunt-svg-sprite模块。

    npm install grunt-svg-sprite --save-dev

I enabled the plugin in my grunt.js file using the line below. 我使用下面的行在我的grunt.js文件中启用了插件。

    grunt.loadNpmTasks('grunt-svg-sprite');  

And my plugin configuration is as follows 我的插件配置如下

  svg_sprite                  : {
    basic                   : {

        // Target basics 
        expand              : true,
        cwd                 : 'images/svg-logo/',
        src                 : 'images/svg-logo/*.svg',
        dest                : 'out/',

        // Target options 
        options             : {
            mode            : {
                css         : {     // Activate the «css» mode 
                    render  : {
                        css : true  // Activate CSS output (with default options) 
                    }
                }
            }
        }
    }
},

My folder structure is given below 我的文件夹结构如下

    Project_folder
    ├───css
    ├───Images
    │   └───svg-logo
    ├───GruntFile.js
    ├───html
    ├───node_modules
    ├───include
    ├───package.json

When i run the following command, i get the success message, but there is no folder has created. 当我运行以下命令时,我收到成功消息,但没有创建文件夹。

Everything is ok here. 这里一切都很好。 src should be specify only the file there. src应该只指定那里的文件。 Try with this one. 试试这个。

    svg_sprite : {
        basic : {

            expand : true,
            cwd : 'images/svg-logo',
            src : ['**/*.svg'],
            dest : 'out',

            options : {
                mode : {
                    css : {
                        render  : {
                            css : true
                        },
                    },
                },
            },
        },
    },

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM