Enter Grunt. Grunt is a JS task runner that does a lot of neat things for you like concatenating, uglifying and linting JS files, and minifying CSS files to name a few common tasks. Let’s see how we can configure this to make our lives easier! **If you have never used Grunt before, I suggest going to the official Getting Started guide.
After we have Grunt installed, we want to install the dependencies we will use. We will be using grunt-include-source. Install this via NPM like so:
npm install grunt-include-source --save-dev
In our Gruntfile, we have to load our tasks.
Next we want to set up our task configurations inside of our grunt.initConfig function so we can tell Grunt how we want them to run. We will start with includeSource.
Your basePath is where includeSource will look for your files at. You can set up your templates for how the script and link tags will be included in your HTLM file here as well.
‘myTarget’ (you can name this anything) specifies the template you will use(on the right of the colon), and which file the scripts will be included in (on the left).
I decided to put the template and index.html file in the same directory. The template is almost exactly like your regular html file. The difference is you include comments which includeSource reads and uses to add the sources to your HTML file. This is how my template looks.
Now I can register a grunt task, so that every time I call it, it will add the JS files I need.
In the terminal, in the root directory of my folder, I type in “grunt build” and BLAMMO!
Obviously, running “grunt build” in the terminal every time isn’t optimal, but you can set up a watch task via grunt-contrib-watch to check for whenever you add or delete a file and update the index.html file. You can also use grunt-wiredep to include all of your bower component files. But more on those later! Hope this helps to automate your life :)