@sgrogov

Почему gulp.spritesmith не генерирует stylus-код для retina-спрайта?

Есть таск для генерации спрайтов
gulp.task('sprites', function() {
	var spriteData = 
		gulp.src( assets + 'images/**/*.*')
			.pipe(spritesmith({
				imgName: 'sprite.png',
				imgPath: '/public/images/sprite.png',
				cssName: 'sprite.styl',
				cssFormat: 'stylus',
				algorithm: 'binary-tree',
				padding: 1,
				retinaSrcFilter: [assets + 'images/**/2x/*-2x.*'],
				retinaImgName: 'sprite-2x.png',
				cssVarMap: function(sprite) {
					sprite.name = 's-' + sprite.name
				}
			}));

	spriteData.img.pipe(gulp.dest( pub + 'images/'))
	return spriteData.css.pipe(gulp.dest( assets + 'stylesheets/build/'));
});

Сами спрайты генерируются нормально, но в sprite.styl нет никаких упоминаний (ни переменных, ни специальных миксинов для retina) о sprite-2x.png, а только для sprite.png.
Версия gulp.spritesmith последняя (3.8.2).
  • Вопрос задан
  • 827 просмотров
Решения вопроса 1
@D8ta
Не нашёл решение проблемы, сделал в лоб. Использовал шаблон для ретины через опции.
var spriteData =
		gulp.src(path.src.sprite)
			.pipe(spritesmith({
				imgName: 'sprite.png',
				algorithm: 'top-down', // binary-tree - плохой алгоритм для ретины
				imgPath: '../img/sprite.png',
				padding: 5,
				// retina
				retinaSrcFilter: ['src/sprite/*-2x.png'],
				retinaImgName: 'sprite-2x.png',
				retinaImgPath: '../img/sprite-2x.png',
				cssName: '_sprite.styl',
				cssFormat: 'stylus',
				cssTemplate: 'src/handlebars/stylus_retina.template.handlebars',
				cssVarMap: function(sprite) {
					sprite.name = 'ic-' + sprite.name
				}
			}));
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@zverygi
Немного знаю html
в первом варианте не нужно указывать тип файла на выходе,
cssFormat: 'stylus',
без нее таск будет работать, плюс нужно добавить
@include retina-sprites($retina-groups)
туда где "собираются" стили
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы