使用 grunt 模块创建 svg 精灵

Question

我是 g运行t 和节点 js 的新手。我在使用 g运行t-svg-sprite 模块创建 svg 精灵时遇到问题。我使用以下命令使用了 grunt-svg-sprite module to create svg sprite image. I have installed the 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

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

Answer 1

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

    svg_sprite : {
        basic : {

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

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

使用 grunt 模块创建 svg 精灵

Creating svg sprites using grunt module

html

javascript

css

svg

gruntjs