修改gulp-svg-sprite的目标和文件名 [英] Modifying destination and filename of gulp-svg-sprite
问题描述
我只是试图围绕着 gulp-svg-sprite 。目标是让我的 sass
目录中包含 scss
文件,然后用我的其余部分进行编译 - 这部分工作正常。但是,生成的 svg
目录也被放入 sass
目录中,所以我最终得到:
- 主题
$ p $
- 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 mysass
directory, and then compiled with the rest of my partials - this part works fine. However, the generatedsvg
directory is also put into thesass
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 assprite.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屋!