backbone, requirejs, grunt requirejs use external templates

Question

I am using on a backbonejs project with requirejs. I am using Gruntjs as build process. In this project I am using external underscore templates. Below is my dir structure.

MainApp/
    app/
        images/
        js/
        styles/
        templates/
    index.html

Below is my requirejs options in Gruntfile.js

requirejs: {
        compile: {
            options: {
                name: "views/app",
                baseUrl: "prod/js",
                mainConfigFile: "prod/js/main.js",
                out: "prod/scripts/scripts.min.js",
                include: ['libs/requirejs/require.js']
            }
        }
    }

However, this seems to be not working. When I build it by running grunt command it does build the project successfully i.e. I am not getting any errors during build process. But when I want to run this project in browser, it does not work. It shows the home page correctly with correct styles but javascript functionality is not working. One of the reason I can think of is I am using external templates which grunt requirejs plugin seems to be not picking up.

How can I use external templates?

UPDATE

I am using grunt-contrib-requirejs plugin.

Answer 1

RequireJS config file is nto included in output file. You must split config and main app:

src/js/config.js

/*global require:false */
require.config({
        urlArgs: 'version=' + (new Date()).getTime(),

        paths: {
                'jquery'        : 'libs/jquery/dist/jquery',
                'underscore'    : 'libs/underscore/underscore',
                'backbone'      : 'libs/backbone/backbone',
                'localStorage'  : 'libs/backbone.localStorage/backbone.localStorage',
        'text'          : 'plugins/text'
        }
});

src/js/main.js

/*global require:false */
/*global Backbone:false */
/*global _:false */

require(['views/app', 'collections/todos', 'router'], function (AppView, TodoCollections, Router) {
        window.App = {
                Vent: _.extend({}, Backbone.Events)
        };

    new AppView({
        collection: new TodoCollections()
    });

    window.App.TodoRouter = new Router();
        Backbone.history.start();
});

Gruntfile.js

requirejs: {
        compile: {
                options: {
                        baseUrl: "dist/js",
                        mainConfigFile: "dist/js/config.js",
                        name: 'main',
                        out: "dist/scripts/scripts.min.js",
                        include: 'libs/requirejs/require.js',
                        optimize: 'none',
                        preserveLicenseComments: false,
                        useStrict: true,
                        wrap: true
                }
        }
},