Precompiling templates in Ember.js

I am creating a Ember project with a Node backend and would like to have my templates as separate files instead of them being inline in the index.html file. I have read many articles explaining this, but I still can't wrap my head around the full process and what the index.html file, etc. will look like when it is all done. Is Grunt the most efficient to do something like this? Here is what my grunt file looks like.

Gruntfile.js:

grunt.loadNpmTasks('grunt-ember-templates');
grunt.registerTask('build', ['emberTemplates', 'concat', 'uglify']); //pass the compiled templates into your concat and uglify tasks. Don't worry, they don't care if they are mushed altogether


// with the following task in the Grunt.config
emberTemplates: {
    compileComponents: {
        options: {
            templateBasePath: /templates\//
        },
        files: {
            'build/precompile/components.js': 'templates/components/*.hbs'
        }
    },
    compileRoutes: {
        options: {
            templateBasePath: /templates\/routes\//
        },
        files: {
            'build/precompile/routes.js': ['templates/routes/*.hbs', 'templates/routes/**/*.hbs']
        }
    },
    compilePartials: {
        options: {
            templateBasePath: /templates\/partials\//
        },
        files: {
            'build/precompile/partials.js': 'templates/partials/*.hbs'
        }
    },
    compileSubstates: {
        options: {
            templateBasePath: /templates\/substates\//
        },
        files: {
            'build/precompile/substates.js': 'templates/substates/*.hbs'
        }
    },
    compileViews: {
        options: {
            templateBasePath: /templates\/views\//
        },
        files: {
            'build/precompile/views.js': 'templates/views/*.hbs'
        }
    }
}