Create a gist now

Instantly share code, notes, and snippets.

@twolfson /.gitignore
Last active Aug 29, 2015

What would you like to do?


grunt-spritesmith example for!

Getting Started

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

# Clone the repository
git clone gist-grunt-spritesmith-retina
cd gist-grunt-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/grunt sprite
./node_modules/.bin/grunt sass


GitHub and Twitter icons were taken from Alex Peattie's JustVector Social Icons.

Fork designed by P.J. Onori from The Noun Project

module.exports = function (grunt) {
// Configure our grunt tasks
sass: {
main: {
// Compile our SCSS which relies on the SCSS from spritesmith
src: 'index.scss',
dest: 'dist/index.scss'
sprite: {
main: {
// Include all normal and `-2x` (retina) images
// e.g. `github.png`, `github-2x.png`
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
dest: 'dist/spritesheet.png',
retinaDest: 'dist/spritesheet-2x.png',
// Generate SCSS variables/mixins for both spritesheets
destCss: 'sprites.scss'
// Load in our task dependencies
// Load in our compiled SCSS variables
@import 'sprites.scss';
// Generate sprite rules and media queries
@include retina-sprites($retina-groups);
"name": "gist-grunt-spritesmith-retina",
"description": "grunt-spritesmith example for!",
"version": "1.0.0",
"author": {
"name": "Todd Wolfson",
"email": "",
"url": ""
"licenses": [
"engines": {
"node": ">= 0.10.0"
"dependencies": {
"grunt": "~0.4.5",
"grunt-cli": "~0.1.13",
"grunt-sass": "~0.18.1",
"grunt-spritesmith": "~4.5.3"
"devDependencies": {},
"keywords": [],
"private": true
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment