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']);
};