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

.gitignore

node_modules/
dist/
sprites.scss

README.md

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

fork-2x.png

fork.png

github-2x.png

github.png

gulpfile.js

// 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('./'));
});

index.scss

// Load in our compiled SCSS variables
@import 'sprites.scss';

// Generate sprite rules and media queries
@include retina-sprites($retina-groups);

package.json

{
  "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
}

twitter-2x.png

twitter.png

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.

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

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

Thanks