I spent significant time googling but the Grunt ecosystem seems to be so fragmented and so unfamiliar to me :(.
PS: I have decided to use Grunt because there is direct integration in WebStorm 8 but maybe other tool would be more suitable for this task?
There are many different solutions available which is why it seems fragmented. I'll describe a couple of the seemingly popular methods.
Use grunt-usemin
You specify blocks within your HTML that it reads and feeds to your other Grunt tasks (concat, uglify, etc). Their docs have extensive examples to handle a lot of different scenarios.
Use a module bundler such as grunt-webpack, grunt-browserify or grunt-contrib-requirejs
Instead of adding script tags to your HTML, use a require()
syntax to include files when needed. Which, depending on the method, will add the scripts to your page or bundle into a single file. These methods only require including, usually, a single javascript file.
Explore and figure out which solution makes the most sense for your needs.