Problem with paths when building front (Gulp.js): how to solve?

Question

css

The structure is like this:

static
├── build
│   ├── css
│   ├── fonts
│   ├── img
│   └── js
└── src
    ├── blocks
    ├── fonts
    └── img

A piece of gulpfile.js:

var path = {
        build: {
            js: 'static/build/js',
            css: 'static/build/css',
            fonts: 'static/build/fonts',
            img: 'static/build/img'

        },
        src: {
            vendor_fonts: ['bower_components/**/*.{svg,woff,eot,ttf}', 'semantic/**/*.{svg,woff,eot,ttf}'],
            vendor_img: ['bower_components/**/*.{png,jpg,jpeg,gif}', 'semantic/**/*.{png,jpg,jpeg,gif}']

        }
};

gulp.task('vendor:img', function(){
    return gulp.src(path.src.vendor_img)
        .pipe(imagemin({
            progressive: true,
            interlaced: true,
            use: [pngguant()]
        }))
        .pipe(gulp.dest(path.build.img))
});

gulp.task('vendor:fonts', function() {
    gulp.src(path.src.vendor_fonts)
        .pipe(gulp.dest(path.build.fonts))
});

When building third-party packages (for example, fotorama or semantic ui), they have relative paths - as a result, relative paths get into main.css and the server does not find them.
What can be done?
PS A crutch with copying files to build is a bad solution.

Answer 1

1. The pattern in src is divided into two parts base + relative (base is everything up to the asterisks, relative is the rest)
2. The final path in dest is written as relative
3. base can be changed by specifying the base option in src() (gulp.src ('a/**/b', {base: '.'}))
Based on these points - set the correct pattern or set the desired base option.
If you have a problem with the paths to fonts (images) in the final css, instead of url('images/etc') you need url('../images/etc), then here you need to look for the gulp plugin on request "rebase" (or postcss plugin )

Answer 2

Before you shit code in gulp
The answer to your question in the third lesson is vynil fs streams.

Answer 3

var rename = require("gulp-rename")
gulp.task('vendor:img', function(){
    return gulp.src(path.src.vendor_img)
    .pipe(imagemin({
        progressive: true,
        interlaced: true,
        use: [pngguant()]
    }))
    .pipe(rename(function (path){
       path.dirname = 'build/'
    }))
    .pipe(gulp.dest(path.build.img))
});