Create a gist now

Instantly share code, notes, and snippets.

@twolfson /.gitignore
Last active Mar 17, 2017

node_modules/
dist/
sprites.scss

gist-gulp.spritesmith-retina

gulp.spritesmith example for http://twolfson.com/2015-04-21-retina-sprites-are-here!

Getting Started

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

# Clone the repository
git clone https://gist.github.com/860a1d47e483bc34e1fa.git 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

Attribution

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.src('index.scss')
.pipe(sass())
.pipe(gulp.dest('dist/'));
});
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')
.pipe(spritesmith({
// 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
spriteData.img.pipe(gulp.dest('dist/'));
// Deliver CSS to `./` to be imported by `index.scss`
spriteData.css.pipe(gulp.dest('./'));
});
// 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 http://twolfson.com/2015-04-21-retina-sprites-are-here!",
"version": "1.0.0",
"author": {
"name": "Todd Wolfson",
"email": "todd@twolfson.com",
"url": "http://twolfson.com/"
},
"licenses": [
"UNLICENSE"
],
"engines": {
"node": ">= 0.10.0"
},
"dependencies": {
"gulp": "~3.8.11",
"gulp-sass": "~1.3.3",
"gulp.spritesmith": "~3.5.4"
},
"devDependencies": {},
"keywords": [],
"private": true
}
@petulla
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.

@radu-arimatrix

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.

@quakes
quakes commented Aug 10, 2016 edited

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

@quakes
quakes 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.

Thanks

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