How to properly organize project structure using gulp + bower?

Question

gulp.js

I am doing a test project in order to study gulpits modules, boweretc.
I just can’t figure out how to properly organize the project structure in the event that it is necessary to copy the main component files from /bower_componentsto the folder where the project is going to ( /dist), to a folder, say, assets
After a certain time spent with Google, connected main-bower-files, which copies the main files component from /bower_componentsto /dist/assets
But this is not quite what we would like.
After all, then, in the file, for example, /src/index.htmlit would be necessary to write the paths to the components installed with the help of bower
handles gulp-wiredep
...

<!-- bower:css -->
<!-- endbower -->

and after completing the task with wiredepthe output is, for example

<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css" />

But the path to the file confuses me ../bower_compontents/bla-bla-bla/etc. Confuses that it bower_compontensis outside the folder dist, after all, I would like that after assembly, all the necessary files were in /distand there was no fuss with the paths.
And a little more googling, I found the component gulp-useref. With it, all included files are inside the following comments:

<!-- build:css css/vendor.css-->
<!-- include css files here -->
<!-- endbuild -->

will be merged into one file vendor.cssand placed in a folder css
So, what I came up with.
1. main-bower-filescopies the main files of the component to, for example, /dist/assets/font-awesome
2. wiredepwrites the paths to the main files of the component into htmla file
3. merges userefthe files and writes the path to htmlthe generated file these files become invalid. For example, after
useref

<!-- build:css css/vendor.css-->
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css" />
<!-- endbuild -->

The folder /dist/csswill contain a file vendor.cssin which the paths to the fonts will look like this:

@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.6.3')...

Although the fonts, in fact, will be located in, /dist/assets/font-awesome/fontsor at worst in ../bower_components/font-awesome/fonts
In general, I can not find the right solution to this problem. I would also like the paths in html to be automatically registered, and the files to be concatenated, and distthere was no garbage in the folder.
I will be glad to any hints and any help.
At the moment, the structure of the project looks like this:

I apologize for the possible redundancy in the explanations and for the amount of text.
Thanks in advance

Answer 1

Solved the problem quite simply.
I came across Yeoman, generated an application using the webapp generator, where I spied on how to better organize the folder structure, plugins, includes ... in general, everything you need.
Suddenly someone needs...