Adding sprites to Sage gulp pipeline

sage
1

I’m using spritesmith to create sprites for a sage project. This is the task config I used:

gulp.task('sprite', function() {
 var spriteData =
      gulp.src('./assets/sprites/*.*') // source path of the sprite images
          .pipe(spritesmith({
             imgName: 'sprite.png',
             cssName: '_sprite.scss',
             imgPath: '../images/sprite.png',
             cssFormat: 'scss',
             algorithm: 'binary-tree'
          }));

 spriteData.img.pipe(gulp.dest('./assets/images')); // output path for the sprite
 spriteData.css.pipe(gulp.dest('./assets/styles/components/')); // output path for the CSS
});

It works, but I personally don’t think it’s the best way.

The task is meant to be run on it’s own so it doens’t run every time.

I created a separate folder for sprites so sage’s gulp wouldn’t automatically minify those images. Then, had the scss sprites output to the assets/styles/components folder so when I compiled the scss I could use the mixins created by spritesmith. I also had to correct the imgpath and point it out of styles folder and into the images folder.

As you can see it’s a bit convoluted. I’m sure there’s a better way. Greatly appreciate suggestions with a better workflow.

Thanks

1 Like