gulp-main-bower-files | Use main-bower-files in a more gulp like way | Frontend Framework library

Using our gulp script, we want to create different compiled & minified css files for vendor (via bower, see screenshot) and custom styles. Our task for the vendor styles does not work as expected, though. We expected it to iterate through the bower_components, grab the css files, concatenate them, minify them and save the generated vendor.min.css to dist/styles. Said vendor.min.css is not generated, however. We tried commenting some of the .pipe() commands in the return statement and suspect that it might have something to do with the concat() function.

Bower components:

Parts of our gulpfile.js including the malfunctioning task:

I'm new to Bower and I would like to use Gulp to handle CSS & JS loading and minification.

I've already solved (I hope) JS minification. But with CSS I found several problems, and not all of them I was able to solve:

1. CSS files which are not found by gulp-main-bower-files plugin. For example CSS styles for jQuery UI. Solved by gulp-add-src plugin.
2. Minimizing styles including @import command. Solved by gulp-cssimport plugin.
3. Image paths in CSS file. Don't know how to solve it when I minimize all CSS into one style. When I minimize CSS with relative paths (for example background: url('../images/bg1.jpg')), minimized file has different location than original one, so path is not working.
4. Fonts paths in CSS file. Also don't know how to solve it. It's the same problem as above. For example with the result of Gulp task below, I'm not able to use Bootstrap icons.

My Gulp task for minify CSS looks like this: