使用grunt模块创建svg精灵

Creating svg sprites using grunt module

本文关键字:svg 精灵 创建 模块 grunt 使用      更新时间:2023-09-26

我是grunt和node js的新手。我在使用grunt svg精灵模块创建svg精灵时遇到了问题。我已经使用grunt svg精灵模块来创建svg精灵图像。我已经使用以下命令安装了grunt svg sprite模块。

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

我使用下面的行在grunt.js文件中启用了这个插件。

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

我的插件配置如下

  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) 
                    }
                }
            }
        }
    }
},

下面给出了我的文件夹结构

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

当我运行以下命令时,我会收到成功消息,但没有创建文件夹。

这里一切正常。src应该只指定那里的文件。试试这个。

    svg_sprite : {
        basic : {
            expand : true,
            cwd : 'images/svg-logo',
            src : ['**/*.svg'],
            dest : 'out',
            options : {
                mode : {
                    css : {
                        render  : {
                            css : true
                        },
                    },
                },
            },
        },
    },