修改gulp-svg-sprite的目标和文件名 [英] Modifying destination and filename of gulp-svg-sprite

问题描述

我只是试图围绕着 gulp-svg-sprite 。目标是让我的 sass 目录中包含 scss 文件，然后用我的其余部分进行编译 - 这部分工作正常。但是，生成的 svg 目录也被放入 sass 目录中，所以我最终得到：

   - 主题
  -  sass 
 ---- _sprites.scss 
 ---- svg 
 ------ sprite.css-58jkdf8js.svg 
  -  css 
 ---- styles.css 
   
 
当我真的需要这个时： 
 
 
   - 主题
  -  -  sass 
 ---- _sprites.scss 
  -  css 
 ---- styles.css 
 ---- svg 
 -------- sprite.css-58jkdf8js.svg 
  
当然，编译样式表有背景：url（svg / sprite.css-58adlksjf.svg）;  
 
 
 
 如何让sprite目录在 / css 而不是 / sass ？  
 
 
这是 gulpfile.js 的相关部分：
  gulp。 task（'svg'，function（）{
 
 config = {
 mode：{
 css ：{//激活«css»模式
 render：{
 scss：true //激活CSS输出（带默认选项）
}，
 dest：'./' ，
 cssFile：_sprite.scss
}，
符号：{
 dest：'../css/'
} 
} 
}; 
 
 gulp.src（ 'SRC / SVG / *。SVG'）
 .pipe（svgSprite（配置））
 .pipe（gulp.dest（ 'SASS'）） ; 
}）
  
我只在符号中添加模式，因为我希望可以在那里创建另一个副本，但它只是将其存储为 sprite.symbol.svg ，这不是CSS引用的内容。 
 
 
 
我想另一种方法是忘掉svg的 sass ，编译成 / css ，然后包含另一个样式表。但是，这意味着我必须在主样式表之前包含它（现在看起来好像没问题，但我还没有想到这一点）。
 
 
 
谢谢！
解决方案
我理解这可能太晚了，但我的解决方案如下所示：
  gulp.task（'svg'，function（）{
 var config = {
 dest：'。' ，
模式：{
 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（配置））
。 pipe（gulp.dest（'。'））; 
}）
  
我更喜欢指定 
 
 
  config.dest：'。'
  
即使是默认值，也可以离开 
 
  gulp.dest（'。'）
  
并从config中处理文件夹。
 
I need to change the directory that the sprite files are compiled to.

I'm just trying to wrap my head around gulp-svg-sprite for the first time.  The goal is to have the scss file included in my sass directory, and then compiled with the rest of my partials - this part works fine.  However, the generated svg directory is also put into the sass directory, so I end up with:
- theme
-- sass
---- _sprites.scss
---- svg
------ sprite.css-58jkdf8js.svg
-- css
---- styles.css
When I actually need this:
- theme
-- sass
---- _sprites.scss    
-- css
---- styles.css
---- svg
------ sprite.css-58jkdf8js.svg
Of course, the compile stylesheet has background: url(svg/sprite.css-58adlksjf.svg);

How can I make that sprite directory get compiled under /css instead of /sass?

This is the relevant part of 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'));
})
I only added in the symbol mode because I was hoping I could just make another copy there, but it just stores it as sprite.symbol.svg which is not what the CSS is referencing.

I'm thinking an alternative is to forget about sass for the svg stuff, compile it to /css and then include another stylesheet.  However, that means I would have to include it before the main stylesheet (which right now seems ok, but I haven't thought that part through yet).

Thanks!
解决方案
I understand it might be too late but my solution was something like this:
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('.'));
})
I prefer to specify
  config.dest : '.'
even it's default, and also to leave
gulp.dest('.')
and handle the folder from config.

                        
这篇关于修改gulp-svg-sprite的目标和文件名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！