Create a gist now

Instantly share code, notes, and snippets.

@twolfson /.gitignore
Last active Aug 29, 2015

What would you like to do?
node_modules/
dist/
sprites.scss

gist-grunt-spritesmith-retina

grunt-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/f9d046b1e312809fced0.git 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

Attribution

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
grunt.initConfig({
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
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-spritesmith');
};
// 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 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": {
"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