Собственно вопрос в заголовке, добавлю лишь то что использую
gulp.spritesmith
Таск выглядит следующим образом:
gulp.task('sprite:build', function() {
var spriteData =
gulp.src(path.src.spriteOrigin_1)
.pipe(plumber())
.pipe(spritesmith({
imgName: path.build.spriteImgName_1,
cssName: '_sprite-data-1.scss',
cssFormat: 'scss',
algorithm: 'binary-tree',
cssTemplate: 'sass.template.mustache',
cssVarMap: function(sprite) {
sprite.name = 's-' + sprite.name
}
}));
spriteData.img.pipe(gulp.dest(path.build.spriteImgPath));
spriteData.css.pipe(gulp.dest(path.src.spriteSass));
});
В нем генерируется еще scss файл с переменными в которых данные для каждого изображения, например
$s-pic-1: 0px 187px 0px -187px 186px 191px 593px 532px '../img/sprite/sprite-2.png';
Эти переменные генерируются по шаблону из файла
sass.template.mustache, его содержимое
{{#items}}
${{name}}: {{px.x}} {{px.y}} {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}} {{px.total_width}} {{px.total_height}} '{{{escaped_image}}}';
{{/items}}
Пробовал создавать такой же таск, но с другим путем для исходников. В итоге спрайт то генерируется, но по мимо этого в продакшен папку выплевываются папки с исходниками. Второй файл с переменными так же генерируется, но sass миксин почему то перестает видеть переменные теперь уже с обоих файлов. С одним таском все прекрасно работает.
Миксин выглядит так:
@mixin spriteWidth($sprite) {
width: nth($sprite,5);
}
@mixin spriteHeight($sprite) {
height: nth($sprite,6);
}
@mixin spritePosition($sprite) {
background-position: nth($sprite,3) nth($sprite,4);
}
@mixin sprite($sprite) {
@include spritePosition($sprite);
@include spriteWidth($sprite);
@include spriteHeight($sprite);
}
В общем, помогите разобраться.
Простой