如何使用gulp-sprite-generator

Question

我想用Gulp创建一个精灵，自动创建一个带坐标的CSS文件，然后从这个精灵中插入带有名字的图像，如：

.my_class {
    background-image: url("images/my-image.png");
}

经过研究后，我想使用gulp-sprite-generator，但我不明白如何使用它。

在我的gulp文件中，我添加了此插件的配置：

gulp.task('sprites', function () {
    var spriteOutput = gulp.src(app + '/css/*.css')
        .pipe(plugins.spriteGenerator({
            baseUrl: 'app/images/sprite',
            spriteSheetName: 'sprite.png',
            spriteSheetPath: 'dist/images/'
        })
    );

    spriteOutput.css.pipe(gulp.dest('dist/css/'));
    spriteOutput.img.pipe(gulp.dest('dist/images/'));
});

但是当我在终端中调用gulp sprites时，不会创建任何精灵。

所以，我想我需要使用CSS来告诉他从精灵文件夹创建一些精灵，但我不能得到它。

感谢您的帮助。

Answer 1

我做了一些工作，找到了 gulp.spritesmith 插件

  

https://github.com/twolfson/gulp.spritesmith

使用这个插件我可以为我的应用程序创建sprite图像和css。

我就是这样做的......

var spritesmith = require('gulp.spritesmith');

// Sprites task - create sprite image
gulp.task('sprites', function () {
  var spriteData = gulp.src(paths.source.images).pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: 'sprite.css',
    imgPath: paths.build.images + 'sprite.png'
  }));
    spriteData.css.pipe(gulp.dest(paths.build.css));
    spriteData.img.pipe(gulp.dest(paths.build.images));
});

这样你就可以在目标css文件夹中获得 sprite.css 文件，在目标图像文件夹中获得 sprite.png 。

Answer 2

查看示例 - https://github.com/alex-chuev/gulp-sprite-example。它是可用的。

但我也遇到了一个问题。我用Ctrl + Alt + Shift + S从Photoshop保存了我的图像，我得到了同样的信息：

  

从0张图片中创建了0个精灵，保存了0％的请求

我已通过在保存对话框中禁用“隔行扫描”复选框解决了该问题：