Grunt: Automatically adding script tags

Question

This may be a stupid question, but I'm quite new to using grunt. I've got an application scaffolded out using the angular yeoman generator. In the index.html I notice lines like this:

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->

Is there a way to to automatically add new script tags as I add files to the scripts directory out of the box, or do I need to use something like grunt-file-blocks?

Answer 1

One way to do this is with the grunt-script-link-tags plugin, here

Assuming all of your scripts are in the scripts directory, you can add this to your Gruntfile.js:

tags: {
    build: {
        src: [
            'scripts/**/*.js'
        ],
        dest: 'index.html'
    }
}

And then add this to your index.html:

<!-- start auto template tags -->
<!-- end auto template tags -->

The result will be all *.js files in scripts (and sub-folders) will be inserted into index.html in a new script tag.