修改gulp-svg-sprite的目标和文件名

Question

我需要更改精灵文件编译到的目录.

我只是想第一次绕过gulp-svg-sprite.目标是将scss文件包含在我的sass目录中,然后使用其余的部分编译 - 这部分工作正常.但是,生成的svg目录也放在sass目录中,所以我最终得到:

- theme
-- sass
---- _sprites.scss
---- svg
------ sprite.css-58jkdf8js.svg
-- css
---- styles.css

当我真的需要这个时:

- theme
-- sass
---- _sprites.scss    
-- css
---- styles.css
---- svg
------ sprite.css-58jkdf8js.svg

当然,编译样式表有 background: url(svg/sprite.css-58adlksjf.svg);

如何让sprite目录编译/css而不是/sass？

这是以下相关部分gulpfile.js:

gulp.task('svg', function() {

  config                  = {
    mode                : {
        css             : {     // Activate the «css» mode
            render      : {
              scss      : true  // Activate CSS output (with default options)
            },
            dest        : './',            
            cssFile     : "_sprite.scss"
        },
        symbol          : {
            dest        : '../css/'
        }
    }
};

  gulp.src('src/svg/*.svg')
    .pipe(svgSprite(config))
    .pipe(gulp.dest('sass'));
})

我只是在symbol模式中添加,因为我希望我可以在那里制作另一个副本,但它只是存储它sprite.symbol.svg不是CSS引用的.

我正在考虑另一种方法是忘记sasssvg的东西,编译它/css然后包含另一个样式表.但是,这意味着我必须在主样式表之前包含它(现在看起来还不行,但我还没想过那部分).

谢谢!

Answer 1

我明白这可能为时已晚,但我的解决方案是这样的:

gulp.task('svg', function() {
    var config = {
        dest : '.',
        mode : {
             css : {
                 dest : '.',
                 sprite : 'css/svg/sprite.svg',
                 render : {
                     css : {dest : 'css/sprite.css'},
                     scss : {
                         dest : './sass/_sprite.scss'
                     }
                 },
             }
         }
     };
 gulp.src('src/svg/*.svg')
     .pipe(svgSprite(config))
     .pipe(gulp.dest('.'));
})

我更愿意指明

  config.dest : '.'

即使它是默认的,也是离开的

gulp.dest('.')

并从配置中处理该文件夹.