Can I instruct Grunt to concat all JS files defined in index.html?
bundling-and-minification, gruntjs, uglifyjs
Solution
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.
Problem
- Can I instruct Grunt to concatenate all JS files defined in index.html without specifically naming them? - Can Grunt also create new index.html file that will load the concatenated JS file instead of the previous multiple files? - Can Grunt also uglify the JS file at a same time? - Can Grunt do this not only for JS files but also CSS files used in a given html file? 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?