Optimization with RequireJS.

config.js

require.config({
  deps: ['main'],
  paths: {
    jquery: 'jquery',
    backbone: 'backbone',
    lodash: 'lodash'
  },
  shim: {
    jquery: {
      exports: '$'
    },
    lodash: {
      exports: '_'
    },
    backbone: {
      deps: ['lodash'],
      exports: 'Backbone'
    }
  }
});

Gruntfile.js

module.exports = function (grunt) {
  
  //...
  
  grunt.initConfig({
    
    //...

    requirejs: {
      options: {
        baseUrl: 'assets/scripts',
        name: 'almond',
        mainConfigFile: 'assets/scripts/config.js',
        out: 'assets/scripts/opt.js',
        wrap: true,
        findNestedDependencies: true,
        optimizeAllPluginResources: false,
        preserveLicenseComments: true,
        optimize: 'none'
      }
    }
    
    //...

  });
  
  //...
};

main.js

require(['MyView'], function (MyView) {
    var myView = new myView();
});

MyView.js

define(['jquery', 'backbone'], function ($, Backbone) {
  var MyView = Backbone.View.extend({});
  return MyView;
});

require-architecture.md

Context

I am new with grunt.js. What I am looking for is to create one single JavaScript file from several scripts with one grunt task. I have installed grunt-requirejs so that I can create a requirejs option in my grunt config object.

As you can see, my RequireJS config file is config.js. All the scripts are saved in /assets/scripts/ and my Gruntfile.js is saved at the root of my directory. I use three librairies: jQuery, BackboneJS and LoDash. I am also using almond.js which is one practice I have been recommanded to do.

You can see all the files needed in my application:

• the config file asks for the main.js script
• main.js requires MyView.js
• MyView.js requires jQuery and BackboneJS
• main.js define a new instance of MyView
• That's it!

With this Gruntfile.js configuration I was able to create the opt.js file. I can notice that all the librairies are in this single file, and my own scripts too. But when I'm loading it from an HTML file, any code defined in my main.js or MyView.js scripts are exectuted. The define function exists and any code outside of these callbacks is executed, it looks as if the requires can't be loaded and the callback not fired obviously.

I don't know what I'm doing wrong, it looks so simple and I fell like I'm close to the solution I need but I can't find anything on the Internet to help me.

Does anybody can show me the right architecture and configuration needed to do what I want?

Thank you.

I did not add the instruction insertRequire: ['main'] into the Gruntfile.js so now it's working. Thanks to @dcherman.

"If you then also use almond to build your code without require.js, be sure to use the insertRequire build setting to insert a require call for the main module -- that serves the same purpose of the initial require() call that data-main does."