gulp任务在gulp-sass之后使用postcss-sprite

Question

我是gulp的初学者，我想对css文件（由gulp-sass构建）进行后处理，并使用postcss-sprites。我会尽力说明自己：

我的设置：

./source/Scss/ <-- contains Scss files ./source/Assets/Images/ <-- contains Images used in CSS (not part of the sprite) ./source/Assets/Sprites/ <-- contains all the .png images that will be part of the sprite

生成的文件结构将如下所示

./dist/Assets/Css/ ./dist/Assets/Images/ ./dist/Assets/Sprites/

这是我到目前为止写的：

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');   
var sprites  = require('postcss-sprites');

gulp.task('sass', function() {
    var spritesopts = {
        spritePath: './dist/Assets/Sprites/'
    };
    
    var plugins = [
        autoprefixer(),
        sprites(spritesopts)

    ];  
  
  return gulp.src('./source/Scss/*.scss')
    .pipe(sourcemaps.init())
    .pipe(plumber())    
    .pipe(sass({
        outputStyle: 'expanded',
        sourceComments:true,
        sourceMap: true
    }).on('error', sass.logError))
    .pipe(postcss(plugins))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/Assets/Css'));
});

请注意，./dist/Assets/Sprites/中的资产已预先复制了另一个任务。

css编译文件具有每个文件的正确相对路径，例如如果我在./source/Assets/Sprites/knot.png中有一个文件，我的css文件将包含：

body { background: url("../Sprites/knot.png"); }

我的问题是sprite任务似乎不起作用... sprite.png文件未生成，并且css文件中根本没有执行任何操作。

我忘记了什么？谢谢您的帮助

更新

将verbose:true添加到postcss-sprites配置中之后，我取得了一些进展：输出消息在某个时刻读取：

postcss-sprites Skip ../Images/logo_staff.png because doesn't exist. +8ms postcss-sprites Skip ../Sprites/knot.png because doesn't exist. +9ms 所以，我看到两个问题

1）解析了css文件中的所有src()声明，而且我不知道如何使其仅考虑那些src(../Sprites/something.png)

2）我不明白这些抱怨是因为找不到文件还是无法读取文件。我仍然没有找到stylesheetPath，spritePath和basePath应该被使用...

更新2

使用postcss-assets，我几乎可以完成我想要的；

这是工作配置：

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var updateRule = require('postcss-sprites/lib/core').updateRule; 
var assets  = require('postcss-assets');
var sprites  = require('postcss-sprites');

// Compiles  Sass
gulp.task('sass', function() {      

    var assetsopts = {    
        cachebuster: true,
        loadPaths: ['Fonts/', 'Images/', 'Sprites/'],
        relative: true,          
        basePath: './dist/Assets/'       
    };
    var sassopts = {
        outputStyle: 'expanded',
        sourceComments:true,
        sourceMap: true
    };
    var spritesopts = {
        spritePath: "./dist/Assets/Sprites/",
        retina: true,
        verbose:true,
        // use only images inside Sprites
        filterBy: function(image) {
                
            if (!/Sprites\//.test(image.url)) {
                return Promise.reject();
            }
            return Promise.resolve('Sprites');
        }                    
    };
    
    var plugins = [        
        autoprefixer(),
        assets(assetsopts),
        sprites(spritesopts)
    ];  
  
  return gulp.src('./source/Scss/*.scss')
    .pipe(sourcemaps.init())
    .pipe(plumber())    
    .pipe(sass(sassopts).on('error', sass.logError))
    .pipe(postcss(plugins))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/Assets/Css'));
});

此配置几乎可以完成我需要做的所有事情

1）编译后的CSS内的资产路径已变为： body { background: url('../../dist/Assets/Images/logo.png?1666708ec50'); } 没错，但是我更喜欢更简洁的../Images/logo.png有可能获得它吗？