gulp.spritesmith 在子目录中找不到视网膜图像

Question

我一直在尝试 gulp.spritesmith 使用视网膜图像，但运气不好。

只要我的图像与 gulp 文件处于同一级别，一切都会按预期进行。如果我将我的图像移动到一个子目录并将 gulp.src 更改为指向它，我会收到以下错误：

AssertionError: Retina settings detected but 0 retina images were found. We have 2 normal images and expect these numbers to line up. Please double check `retinaSrcFilter`.

这是我的设置：

gulp.task('sprite', function () {
  var spriteData = gulp.src('img/*.png')
  .pipe(spritesmith({
    retinaSrcFilter: '*@2x.png',
    imgName: 'spritesheet.png',
    retinaImgName: 'spritesheet@2x.png',
    cssName: 'sprites.scss'
  }));

  return spriteData.pipe(gulp.dest('dist/'));
});

同样，如果我将 src 更改为

var spriteData = gulp.src('*.png')

那里有相同的图像，一切都很好。

有谁知道这里的问题是什么？

谢谢。

Answer 1

我想你可能也需要 retinaSrcFilter glob 中的目录？

gulp.task('sprite', function () {
  var spriteData = gulp.src('img/*.png')
  .pipe(spritesmith({
    retinaSrcFilter: 'img/*@2x.png',
    imgName: 'spritesheet.png',
    retinaImgName: 'spritesheet@2x.png',
    cssName: 'sprites.scss'
  }));

  return spriteData.pipe(gulp.dest('dist/'));
});

gulp.spritesmith 在子目录中找不到视网膜图像

gulp.spritesmith can't find retina images when in a subdirectory

css-sprites

gulp