Add structure for JavaScript assets

[pokhiii]

What we have

In the current boilerplate, one single JS file is loaded on all the pages (public/wp-content/themes/coloredcow/main.js). This file is compiled from public/wp-content/themes/coloredcow/src/js/main.js.

Issue

With a single JS file, we missed out on the opportunity. There can be page-specific JavaScript like slider may be needed on a single page. I think it makes sense to load it on the pages on which we need it.

Possible solution 1

1. Have a single JS that contains generic code: public/wp-content/themes/coloredcow/main.js
2. Have multiple page-specific JS files: page-about.js, page-team
3. Running grunt will combine main.js with each page's JS file will create minified files for each file.
4. We will enqueue based on the page's slug

Possible solution 2

1. The first two steps are the same as above.
2. Grunt will not combine the page-specific JS file with the main.js and generate the just the minified file.
3. There will be two files that will be enqueued on each page (hence two requests): main.js and page-*.js

@rathorevaibhav would love to know your thoughts/questions.