Question

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

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

如果(*-2x.png)文件夹中没有视网膜images图片，我发现错误了 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'));
});

为视网膜和非视网膜精灵分别设置gulp.spritesmith设置

1 个答案: