Невозможно изменить конечный спрайт с помощью Gulp Spritesmith

Question

Я использую Gulp Spritesmith для генерации массивного длинного спрайта, чтобы создать эффект анимации прокрутки.

Я следую этого урока .И в этом уроке есть функция sass, которая перебирает изображения:

@for $i from 1 through $frame-count {
  .frame#{$i} {
    background-position: -(($i * $offset-val) * 2) + px 50%;
  }
}

Я собирался сделать то же самое, только по вертикали, поэтому:

@for $i from 1 through $frame-count {
  .frame#{$i} {
    background-position: 0px -(($i * $offset-val) * 2) + px;
  }
}

Но независимо от того,из того, что я делаю, тогда мой выходной спрайт использует binary-tree -алгоритм для создания спрайтов.

Итак, если у меня есть 16 изображений, то спрайт выглядит так:

1  2  7  13
3  4  8  14
5  6  9  15
10 11 12 16

И я бы хотел, чтобы они были такими:

1
2
3
4
5
6
7
...
...   

Вот мое ядроФайл Grit Spritesmith:

var gulp = require('gulp');

var spritesmith = require('gulp.spritesmith');

gulp.task('default');

gulp.task('sprite', function () {
  var spriteData = gulp.src('images/*.jpg')
  .pipe(spritesmith({
    imgName: 'sprite.jpg',
    cssName: 'sprite.css',
    algorithm: 'top-down'
  }));
  spriteData.img.pipe(gulp.dest('img'));
  spriteData.css.pipe(gulp.dest('css'));
});

За последние три часа я возился с этими тремя строками:

  .pipe(spritesmith({
    imgName: 'sprite.jpg',
    cssName: 'sprite.css',
  }));

... и независимо от того, что я делаю, - тогда я могуполучить выходные файлы для изменения (вообще!).Даже имя, заменив cssName: 'sprite.css', на cssName: 'foobar.css',!

Что мне не хватает?

Answer 1

Решение для создания спринт-изображения сверху вниз с использованием spritesmith или gulp.spritesmith

, где спрайт-изображение имеет 4 изображения блока мозаики, как показано нижеизображение и т. д.

Пример кода:

gulpfile.js

var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');

gulp.task('sprite', function () {
  var spriteData = gulp.src('app/images/*.jpg').pipe(spritesmith({
    imgName: 'doodle-sprite.jpg',
    cssName: 'sprite.scss',
    algorithmOpts: {
      sort: false
    },
    algorithm: 'top-down',
  }));
  return spriteData.pipe(gulp.dest('app/images/'));
});

---

мой результат для sprite.scss

@mixin sprite-width($sprite) {
  width: nth($sprite, 5);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 6);
}

@mixin sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 3);
  $sprite-offset-y: nth($sprite, 4);
  background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite-image($sprite) {
  $sprite-image: nth($sprite, 9);
  background-image: url(#{$sprite-image});
}

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}

// The `sprites` mixin generates identical output to the CSS template
//   but can be overridden inside of SCSS
//
// @include sprites($spritesheet-sprites);
@mixin sprites($sprites) {
  @each $sprite in $sprites {
    $sprite-name: nth($sprite, 10);
    .#{$sprite-name} {
      @include sprite($sprite);
    }
  }
}

out come image