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) {
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 %>']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat','uglify']);
};
Any help is appreciated :)