How to use Bower?

Question

css

I have a project with something like this structure:

lang/
— ru.json
audio/
— audio.ogg
popup/
— css/
— — fontello/
— — popup.css
— — jquery.mCustomScrollbar.min.css
— img/
— — image.png
— plugins/
— — jquery.mCustomScrollbar.concat.min.js
— — linkify.min.js
— — Emoji.js
— popup.html
— popup.js
— popup-constructor.js
index.html
jquery-2.1.4.min.js
index.js
get.js

Used by jquery in index.html and in popup/popup.html.
Also uses a few other plugins in popup/popup.html
How do I use bower for my current project?
As an option, place the bower_components folder in the project and refer to files from it in .html files, but then the size of the project grows enormously (more than 4 times).
Tried using Grunt to merge all the main files from bower and throw it into the project. And in principle, this could solve the problem, but not completely. What about jquery? It is also connected using Bower, and is used in two different files. Accordingly, it needs to be minified, but not combined with all other plugins.
With the help of Grunt, I learned how to merge and compress files. The result can be thrown into another folder, but do I understand correctly that in this case all other files - audio, pictures, html - will have to be copied manually. And then in .html files include compressed files of scripts and styles?
Ideally, I would like to get a copy of my project, where files for index.html are separately compressed: index.js+get.js. And for popup.html: popup.js+popup-constructor.js+<all files from bower excluding jQuery>, popup.css+<all files from bower>.
And so that the newly compressed files are automatically connected in these .html files.

Answer 1

If the problem is only copying assets to the folder with built scripts, then grunt-contrib-copy.

Answer 2

I just want to insert the picture "Occam's razor", what problem are you solving?
Firstly, jquery must be connected from any cdn, you must have a reason that you know exactly why you put it in the project.
What's the difference how much it occupies on the disk if you connect only minified versions through script src.
Why copy anything?

Ideally, I would like to get a copy of my project, where files for index.html are separately compressed: index.js+get.js. And for popup.html: popup.js+popup-constructor.js+<all files from bower excluding jQuery>, popup.css+<all files from bower>.
And so that the newly compressed files are automatically connected in these .html files.

Compress immediately index.js+get.js+popup.js+popup-constructor.js=app.js (for example), everything you have in bower most likely lies on some cdn, on https://cdnjs.com definitely there

Answer 3

you can solve part (if not all) of the issues through grant usemin: in Dev in html you write addresses (css and js), around usemina conditional comments, when everything is copied to the prod, set up a usemin task and it will replace your jicquery and others with links on minified versions, and if I'm not mistaken, it will glue it, then whatever you say.
And there is like a plugin for a grant, which replaces the link to cdn.