The file path changes

[brendan8c]

I use gulp

const app = ('app/')
const build = ('build/')

const config = {
    app: {
        html: app + 'html/**/*.html',
        style: app + 'scss/**/*.scss',
        img: app + 'img/**/*.*',
    },
    build: {
        html: build,
        style: build + 'css',
        img: build + 'img',
    }
}

function scss() {
    let opts = {
        stylesheetPath: build,
        styleFilePath: 'build/css/style.min.css',
        spritePath: config.build.img,
        basePath: build
    };
    let plugins = [
        autoprefixer(),
        cssnano(),
        sprites(opts)
    ];

    return src(config.app.style, 'utf8')
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(sourcemaps.identityMap())
        .pipe(sass())
        .pipe(postcss(plugins))
        .pipe(concat('style.min.css')) 
        .pipe(sourcemaps.write('../sourcemaps/'))
        .pipe(dest(config.build.style))
}

(spritePath: config.build.img) If I give the path to the images in spritePath the sprite.png file will be created! But there will be an error: the path to sprite.png will be incorrect!

If I change the path to (spritePath: 'img') then the sprite.png file will not be created. But then the path to the sprite.png file in the css will be correct!

What do I need to do?

[brendan8c]

I fixed this using the 'replace-in-file' plugin. This is the out of the box gulp solution Replace all lines of a similar type with others. Example: replace img/sprite.png with ../img/sprite.png

const { series } = require('gulp')
const replace = require('replace-in-file')

function updateRedirects(done) {
    replace({
        files: 'build/css/style.min.css',
        from: /img\/sprite.png/g, // img/sprite.png – Replace this.
        to: '../img/sprite.png', // ../img/sprite.png – Replace with this.
        countMatches: true,
    }, done)
}

exports.build = series(updateRedirects) // Start