Skip to content

Instantly share code, notes, and snippets.

@twolfson twolfson/.gitignore
Last active Feb 22, 2018

What would you like to do?


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

This comment has been minimized.

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.


This comment has been minimized.

Copy link

radu-arimatrix commented Mar 8, 2016

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.


This comment has been minimized.

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


This comment has been minimized.

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
You can’t perform that action at this time.