Unable to change with of final sprite using Gulp Spritesmith

I'm using Gulp Spritesmith to generate a massive long sprite, to make a scrolling animation effect.

I'm following this tutorial. And in that tutorial there's this sass-function, that iterates through the images:

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

I was going to do the same thing, only vertically, so:

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

But regardless of what I do, then my output sprite is using the binary-tree-algorithm to make the sprites.

So if I have 16 images, then the sprite looks like this:

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

And I would like them to be like:

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

Here's my core Gulp Spritesmith file:

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

I've fiddled around with these three lines for the past hour:

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

... and regardless of what I do, - then I can't get the output files to change (at all!). Not even the name, replacing cssName: 'sprite.css', with cssName: 'foobar.css',!

What am I missing?

from Unable to change with of final sprite using Gulp Spritesmith