Autoresize incorrect retina sprites
npm install gulp-retina-sprites-normalizer> Retina size images normalizer.
10x10 could be 10x9 or 11x10. The Normalizer adding transparent padding to images for correct 2x size.Install with npm
``sh`
$ npm i gulp-retina-sprites-normalizer --save-dev
###### Usage with gulp.spritesmith
`js
var path = require('path'),
gulp = require('gulp'),
imagesNormalizer = require('gulp-retina-sprites-normalizer')
// Install gulp.spritesmith first it not goes as dependency for the module
var spritesmith = require('gulp.spritesmith')
gulp.task('build-sprites', function() {
var spritesGroup = {
spritesPath: './fixtures',
chunksMask: '*/.png',
chunksMaskRetina: '*/2x.png',
imgBuiltDir: './dest'
}
// You can specify your retina images names first
imagesNormalizer.ImagesPadding.prototype.retinaSrcFilter = spritesGroup.chunksMaskRetina // default: */2x.png
imagesNormalizer.ImagesPadding.prototype.retinaFileSuffix = '@2x.png' // default: @2x.png
return gulp.src(path.join(spritesGroup.spritesPath, spritesGroup.chunksMask))
.pipe(imagesNormalizer())
.pipe(
spritesmith(
{
cssName: 'main.css',
padding: 4,
imgName: 'main.png',
retinaSrcFilter: path.join(spritesGroup.spritesPath, spritesGroup.chunksMaskRetina),
retinaImgName: 'main@2x.png'
}
)
)
.img.pipe(gulp.dest(spritesGroup.imgBuiltDir))
})
`
###### Stand alone usage
If you want just normalize images and save - it's simple.
`js
var gulp = require('gulp'),
imagesNormalizer = require('gulp-retina-sprites-normalizer')
gulp.task('normalize-sprites', function () {
gulp.src(path.join('./fixtures/*/.png'))
.pipe(imagesNormalizer())
.pipe(gulp.dest('./dest/sprites'))
})
``
Alex Batalov