視網膜和非視網膜精靈的獨立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')); 
});