what should I know before merging javascript files into one?

Question

So I'm just learning to use grunt to concatenate, and if it ever gets to that point, minify/uglify my various js scripts to reduce HTTP requests.

However, I'm suspecting it's not as easy as simply picking files to concatenate and expect it work. Most of the javascript works after I have merged it, however, particularly the Foundation portion is failing. To those who dont know, Foundation is a frontend framework, and is initialized by calling it like so:

$(document).foundation();

the error log shows me this:

    TypeError: $(...).foundation is not a function
    $(document).foundation();

In any case, I would like to know what makes some javascript work when merged, and why others do not. Does it have something to do with the order in which they are merged? Also what should I know about writing javascript before I play with minifying/compressing and concatenating? I am just starting to learn using namespaces myself, and I have seen them mentioned in this regard. But I can't find sources on their importance and how exactly it is used in my case.

If anyone is interesting in what my Gruntfile looks like, here it is:

    module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
  options: {
    separator: ';'
  },
  dist: {
    src: [
        'bower_components/foundation/js/vendor/jquery.js',
        'bower_components/foundation/js/vendor/modernizr.js',
        'javascripts/vendor/quickform.js',
        'javascripts/vendor/jquery.dataTables.min.js',
        'javascripts/dataTables/dataTables.foundation.js',
        'javascripts/vendor/jstz.min.js',
        'bower_components/foundation/js/vendor/fastclick.js',
        'bower_components/foundation/js/foundation.js">',
    ],
    dest: 'dist/<%= pkg.name %>.js'
  }
},
uglify: {
  options: {
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
  },
  dist: {
    files: {
      'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
    }
  }
}
});

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  // Default task(s).
  grunt.registerTask('default', ['concat','uglify']);
};

Any help is appreciated :)

Answer 1

The order in which you merge them is what matters most of the time. For example, lets say you have two small JS files. One contains var a="hi" and the other contains alert(a). If you merged them in the order that they are, everything would work fine and an alert box containing "hi" would appear. But if you merge them the other way, it would alert undefined because a isn't defined yet. Typically, the JS that defines variables and functions should come first.

---

That's all the help I can give you. I hope this helps you a bit.