Create a gist now

Instantly share code, notes, and snippets.

@twolfson /.gitignore
Last active Mar 17, 2017

What would you like to do?
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 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.

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 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

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