单独的gull.spritesmith设置用于视网膜和非视网膜精灵

Question

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

{
  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'));
});