Gulp 大口大口大口大口地喝“精灵之师”；图标-"；生成的css文件中的前缀

我正在使用gulp.spritesmith自动生成精灵图像和css。除了生成的css是haivng“icon-”前缀之外，所有的工作都很好。我不想添加这个前缀，因为我有现有的HTML标记，也不想更改标记。 以下是我的吞咽任务

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


gulp.task('sprite', function () {    

    var spriteData =
            gulp.src('./sprite/*.*') // source path of the sprite images
            .pipe(spritesmith({
                imgName: 'sprite.png',
                cssName: 'sprite.css'
            }));

    spriteData.img.pipe(gulp.dest("./css")); // output path for the sprite
    spriteData.css.pipe(gulp.dest("./css")); // output path for the CSS
});

下面是我生成的css

.icon-icon1 {
  background-image: url(sprite.png);
  background-position: 0px 0px;
  width: 120px;
  height: 120px;
}
.icon-icon2 {
  background-image: url(sprite.png);
  background-position: -120px 0px;
  width: 120px;
  height: 120px;
}

请帮助添加“图标-”

您可以使用删除“icon-”前缀

sprite

任务的最后一行将变成

spriteData.css
  .pipe(replace(/^\.icon-/gm, '.'))
  .pipe(gulp.dest("./css"));

---

您也可以使用库的

css选择器

cssOpts: {
  cssSelector: function (sprite) {
    return '.' + sprite.name;
  }
}

---

谢谢很高兴了解更换模块。成功了。我还尝试了以下选项，但效果太好：{cssSelector:function（sprite）{return'.+sprite.name；}}}我觉得这应该是首选答案。通过配置选项更好地处理这些问题。