What should I know before merging javascript files into one?

So, I just learned to use grunt for concatenation, and if it ever comes to this point, minify / uuglify my various js scripts to reduce it HTTP requests.

However, I suspect that it is not as simple as collecting files for concatenation and expecting it to work. Most javascript works after I merge it, however, in particular, the Foundation part fails. For those who don’t know, Foundation is the frontend interface and is initialized by calling it like this:

$(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 javascript does when merging, while others do not. Does it have anything to do with the order in which they are combined? Also, what should I know about writing javascript before I start playing with minimization / compression and concatenation? I am just starting to learn using namespaces, and I have seen them in this regard. But I can’t find sources about their importance and how it is used in my case.

If anyone is interested 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 :)

+3
source share
1 answer

, , - , . , , JS . var a="hi", alert(a). , , , , "". , undefined, a . , JS, , .


, . , .
+1

All Articles