Skip to content

Instantly share code, notes, and snippets.

Last active February 22, 2018 09:29
Show Gist options
  • Save twolfson/860a1d47e483bc34e1fa to your computer and use it in GitHub Desktop.
Save twolfson/860a1d47e483bc34e1fa to your computer and use it in GitHub Desktop.


gulp.spritesmith example for!

Getting Started

The following steps will get this repo setup and running with our build:

# Clone the repository
git clone gist-gulp.spritesmith-retina
cd gist-gulp.spritesmith-retina/

# Install our dependencies
npm install

# Run our build steps
#   DEV: If we leverage `npm-run-script`, we can remove `./node_modules/.bin/`
./node_modules/.bin/gulp sprite
./node_modules/.bin/gulp sass


GitHub and Twitter icons were taken from Alex Peattie's JustVector Social Icons.

Fork designed by P.J. Onori from The Noun Project

// Load in our dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var spritesmith = require('gulp.spritesmith');
// Define our tasks
gulp.task('sass', function generateSass () {
gulp.task('sprite', function generateSpritesheets () {
// Use all normal and `-2x` (retina) images as `src`
// e.g. `github.png`, `github-2x.png`
var spriteData = gulp.src('*.png')
// Filter out `-2x` (retina) images to separate spritesheet
// e.g. `github-2x.png`, `twitter-2x.png`
retinaSrcFilter: '*-2x.png',
// Generate a normal and a `-2x` (retina) spritesheet
imgName: 'spritesheet.png',
retinaImgName: 'spritesheet-2x.png',
// Generate SCSS variables/mixins for both spritesheets
cssName: 'sprites.scss'
// Deliver spritesheets to `dist/` folder as they are completed
// Deliver CSS to `./` to be imported by `index.scss`
// Load in our compiled SCSS variables
@import 'sprites.scss';
// Generate sprite rules and media queries
@include retina-sprites($retina-groups);
"name": "gist-gulp.spritesmith-retina",
"description": "gulp.spritesmith example for!",
"version": "1.0.0",
"author": {
"name": "Todd Wolfson",
"email": "",
"url": ""
"licenses": [
"engines": {
"node": ">= 0.10.0"
"dependencies": {
"gulp": "~3.8.11",
"gulp-sass": "~1.3.3",
"gulp.spritesmith": "~3.5.4"
"devDependencies": {},
"keywords": [],
"private": true
Copy link

petulla commented Sep 25, 2015

Can you explain this part:

@include retina-sprites($retina-groups);

Which mixin is this? It doesn't seem as though spritesmith generates includes for the retina .png.

Copy link

As far as I can tell this @include retina-sprites($retina-groups); actually creates classes for every image file in the sprite folder and media queries for the retina sprite. You will find these in the CSS file.

Copy link

ghost commented Aug 10, 2016

True @petulla,

Spritesmith doesn't generate this mixin:

@include retina-sprites($retina-groups);

I have added the spritesmith task to my gulpfile but it doesn't seem to generate the retina-sprites mixin

Copy link

ghost commented Aug 11, 2016

I found what was causing the issue. If you add the cssFormat option, the retina-sprites mixin doesn't get generated.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment