Javascript 无法使用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;
  }
}

但不管我做什么，我的输出精灵都是使用

二叉树

-算法来制作精灵

如果我有16幅图像，那么精灵看起来像这样：

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

我希望他们像：

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

这是我的核心吞咽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:'foobar.css'，

替换为

cssName:'foobar.css'，

---

我错过了什么

使用或从上到下创建sprint映像的解决方案

其中，sprite图像有4个瓷砖块m的图像，如下图等

示例代码：

gulpfile.js

---

我对sprite.scss的结果

输出图像

---

是否可以共享完整/部分代码。因为我试过使用代码，所以从上到下的打印算法效果很好。@kavinraj。。。我爱你！我在这件事上胡闹了很长时间，已经失去了希望。但是在您编写之后，我重新获得了希望，-删除了我的node_模块，my package.json，从

npm init--y

开始，然后重试，现在它开始工作了！我想一定是我的package.json文件中有什么东西关闭了，但我不确定。你应该得到赏金。我能让你大致描述一下你是如何做到这一点的（以防其他人发现自己也有同样的问题）。那我就把它作为答案。

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/'));
});

@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);
    }
  }
}