unable to load ember templates from external files using grunt-ember-templates

Question

My index.html is in root directory and I have specified application template in that itself. I have a templates directory in which I keep the .hbs templates.

The Gruntfile is this:

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),

  emberTemplates: {
    compile: {
      options: {
        amd: true,
        templateBasePath: "templates/"
      },
      files: {
        "templates/result.js": "templates/*.hbs"
      }
    }
  }
});

grunt.loadNpmTasks('grunt-ember-templates');

// Default task(s).
grunt.registerTask('default', ['emberTemplates']);

};

I have an index.hbs file in templates directory which is just one line:

<h1>HBS</h1>

When I run grunt, I get this as result.js

define(["ember"], function(Ember){

Ember.TEMPLATES["index"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};



  data.buffer.push("<h1>HBS</h1>\n");

});

});

And I am including the result.js file in my index.html. However, I still don't see the remplate content rendered. So, how do I get this working?