Building vendors via main-bower-files and gulp. How?

Question

Building projects

Asked a similar question, got no answer.
The guy, in one phrase, took out hedgehogs from the priests, he didn’t understand anything, the problems were and remained unresolved.

So the task is to combine all the vendors from bower_components into the same file as the rest of the styles and scripts, so that only pictures and one CSS/JS file are requested as requests. Ideally, of course, the pictures should also be molded into one canvas.
If anyone has already solved it please let me know.
If there are none, let's decide, the approximate plan is as follows:
1) Write paths BY HANDS AND LONG overrides/#component#/main/#glob#in bower.json for each lib
2) Get a stream from Bower - this is what main-bower-files does for us, if we write paths in bower.json
3 ) Filter split into styles, scripts, pictures and others
4) js concat, minify and save (not forgetting the reading order)
5) just copy other files (the most important thing is to save the paths (HOW?))
6) embed images into one canvas (gif there, png here, jpg here) (HOW?)
7) minify and copy pictures (the most important thing is to save the paths, or as a canvas to any place (HOW?))
8) - (How?) Write in the CSS stream the saved paths of the copied images (replace according to the template), and in the case of the canvas - also indents, that is, when pasting the next image in the stream, you need to immediately change all occurrences in the CSS for it
9) css concat, minify , put down -webkit, run csscomb and save as a result
Who knows how to make items highlighted in black?

Answer 1

https://github.com/sapegin/grunt-bower-concat