视网膜和非视网膜精灵的独立gulp.spritesmith设置

Question

我使用gulp和gulp.spritesmith来生成精灵。这是我的gulpfile.js。 Sprite设置存储在一个对象中。

{ 
    imgName: 'sprite.png', 
    cssName: 'sprite.css', 
    padding: 10, 
    retinaSrcFilter: 'images/*-2x.png', 
    retinaImgName: 'sprite-2x.png' 
} 

如果在images文件夹中没有视网膜(*-2x.png)图片，我有一个错误
Retina settings detected but 0 retina images were found. We have 3 normal images and expect these numbers to line up. Please double check retinaSrcFilter.
我如何检查是否存在，并加载合适的对象（有或无视网膜设置）视网膜图像在spritesmith？

Answer 1

似乎，当某些源图像没有x2模拟时会导致此错误。如果您有遗留的x1精灵，则必须为它们添加x2图像。

对于新X2图片，您可以创建单独的文件夹，并使用gulp-image-resize规模下来到X1，然后使用gulp.spritesmith与retinaSrcFilter：

var $, gulp; 

gulp = require('gulp'); 
$ = require('gulp-load-plugins')(); 

gulp.task('sprites-retina', function() { 
    var spriteData; 
    gulp.src('spritesRetinaFolder/**/*@2x.png').pipe($.imageResize({ 
    width: '50%', 
    height: '50%' 
    })).pipe($.rename(function(path) { 
    path.basename = path.basename.slice(0, -3); //remove @2x label 
    })).pipe(gulp.dest('spritesRetinaFolder')); 

    spriteData = gulp.src('spritesRetinaFolder/**/*.png').pipe($.spritesmith({ 
    retinaSrcFilter: 'spritesRetinaFolder/**/*@2x.png', 
    otherConfigParams... 
    })); 
    spriteData.img.pipe(gulp.dest('destImagesFolder')); 
    spriteData.css.pipe(gulp.dest('destStylesFolder')); 
});