Skip to content

Instantly share code, notes, and snippets.

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

Embed
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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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.

@quakes

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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