https://github.com/steadicat/gulp-sprites-2x

An easy-to-use sprites generator plugin for Gulp with Retina support
https://github.com/steadicat/gulp-sprites-2x

Last synced: 8 days ago
JSON representation

An easy-to-use sprites generator plugin for Gulp with Retina support

• Host: GitHub
• URL: https://github.com/steadicat/gulp-sprites-2x
• Owner: steadicat
• Created: 2014-07-18T20:11:12.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2015-01-16T00:50:31.000Z (almost 10 years ago)
• Last Synced: 2023-04-21T17:13:21.797Z (over 1 year ago)
• Language: JavaScript
• Size: 160 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# gulp-sprites-2x

An easy-to-use wrapper around `gulp.spritesmith` which generates optimized CSS, supports mixing 1x and 2x images in the same folder and piping multiple folders of sprites at once.

Pass Gulp Sprites 2X a bunch of folders filled with mixed `.png` and `@2x.png` files (what most graphics programs export), and it will generate two sprites for each folder (1x and 2x), with the corresponding CSS file.

~~~javascript

gulp.src('images/*-sprite/*.png')

  .pipe(sprites)

  .pipe(gulp.dest('build');

~~~

Generates:

~~~shell

build/

  home-sprite.png

  [email protected]

  home-sprite.css

  about-sprite.png

  [email protected]

  about-sprite.css

~~~

You can pipe the output to `gulp-if` and, e.g., upload the pngs to S3 and concatenate the CSS with the rest of your CSS.

~~~javascript

var sprites = gulp.src('images/*-sprite/*.png')

  .pipe('sprites');

var spriteImages = sprites

  .pipe($.filter('**/*.png'))

  .pipe(gulp.dest(BUILD_DIR));

var spriteCss = sprites

  .pipe($.filter('**/*.css'));

var allCss = merge(css, spriteCss)

  .pipe(gulp-join())

  .pipe(gulp.dest(BUILD_DIR));

~~~