使用grunt模块创建svg sprite

时间:2015-04-02 06:00:43

标签: javascript html css svg gruntjs

我是grunt和node js的新手。我在使用grunt-svg-sprite模块创建svg sprites时遇到了问题。我使用grunt-svg-sprite模块来创建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

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

1 个答案:

答案 0 :(得分:3)

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

    svg_sprite : {
        basic : {

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

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