A quick browserify rundown

1-index.js

//assume that Backbone and $ are available as globals

//everything in this file will be interpretted as soon as the JS is
//loaded by the browser.

var MainRouter = require('./2-mainRouter'); //A Backbone Router

//doc ready
$(function () {
  router = new MainRouter();
  Backbone.history.start({pushState: true});
});

2-mainRouter.js

//again, anything in the global scole is interpretted on JS load by the browser

//this is loaded immediately
window.test = 'testing';

//whereas this will be defined and picked up by the require statement
module.exports = Backbone.Router.extend({
  routes: {
    'foo/bar': 'doFooBar'
  },
  
  doFooBar: function () {
    //route fn
  }
  
});

3-Gruntfile.js

//browserify task 
module.exports = function(grunt) {

  //This will figure out the dependency graph of every file in the client/js tree (eg the two files above).
  //They'll be concatenated into a single output file (app.js). 
  //Keep in mind that the doc.ready call is like a `main()` fn for your app.
  //It's also possible to get fancier here: you can make certain required files accessible 
  //from the global scope (using externalize), you can alias files to different names, 
  //you can perform dynamic transformations during browserify compilation. But this is the start.
  grunt.initConfig({
    browserify: {
      "app": {
        dest: 'public/js/app.js',
        src: 'client/js/**/*.js'
        options: {
          debug: true
        }
      }
    },
  });
  
  grunt.loadNpmTasks('grunt-browserify');
  grunt.registerTask('default', ['browserify']);
};

@jmreidy - awesome, from my end I think I need to use the externalize function since we are wrapping our whole application (including all of it's dependencies) in theAppName(). The intention is to avoid polluting the global namespace, but I'm wondering if this is a technical "gotcha" which seems like a good idea but is actually not :/ ... Basically, it means that other dependencies in my bundle need to look to theAppName.$ for example to get to jQuery from window. Is the externalize option able to handle such a pattern? Have a look at my app definition over here: https://gist.github.com/brianfeister/5818934