0

I am using Grunt for build tasks, and I have subdivided concatenation activities. In particular, I have a concat for Bootstrap, one for DataTables, and then one that takes those plus jQuery and attempts to make a monolith.

I am quite certain that my failure is due to asynchronous calls. I am trying to concatenate the files in "purgatory" before they exist! However, I'm not sure how to get around this other than to make a new task that repeats all the concats already done.

Here's how I visualize it, however I know full well that the async nature of the task makes it impossible:

grunt.initConfig({
/* ... other initConfig stuff ... */
  concat: {
    options: {
        stripBanners: false
    },
    bootstrapJS: {
        banner: '/*!\n' +
            ' * Bootstrap v<%= bootstrapInfo.version %> (<%= bootstrapInfo.homepage %>)\n' +
            ' * Copyright 2011-<%= grunt.template.today("yyyy") %> <%= bootstrapInfo.author %>\n' +
            ' * Licensed under the <%= bootstrapInfo.license %> license\n' +
            ' */\n<%= jqueryCheck %>\n<%= jqueryVersionCheck %>',
        src: [
            '/lib/bootstrap/js/transition.js',
            '/lib/bootstrap/js/alert.js',
            '/lib/bootstrap/js/button.js',
            '/lib/bootstrap/js/carousel.js',
            '/lib/bootstrap/js/collapse.js',
            '/lib/bootstrap/js/dropdown.js',
            '/lib/bootstrap/js/modal.js',
            '/lib/bootstrap/js/tooltip.js',
            '/lib/bootstrap/js/popover.js',
            '/lib/bootstrap/js/scrollspy.js',
            '/lib/bootstrap/js/tab.js',
            '/lib/bootstrap/js/affix.js'],
        dest:
            'purgatory/js/bootstrap.js'
    },
    dataTablesJS: {
        src: [
            '/lib/js/datatables/jquery.dataTables.js',
            '/lib/js/datatables/dataTables.bootstrap.js'],
        dest:
            'purgatory/js/dataTables.js'
    },
    noCompMonolith: {
        src: [
            'lib/jquery.js',
            'purgatory/js/bootstrap.js',
            'purgatory/js/dataTables.js'],
        dest:
            'dev/js/application_monolith.js'
    }
  }
});

Or trying to be smart and using tags, the noCompMonolith would look more like this (which is really just the same thing if I formatted the tags correctly):

noCompMonolith: {
    src: [
        'lib/jquery.js',
        '<%= concat.dataTablesJS.dest %>',
        '<%= concat.bootstrapJS.dest %>'],
    dest:
        'dev/js/application_monolith.js'
}

I also tried using a function, but the initConfig must sanity-check for proper arrays, not functions that return arrays. Or, I have syntax errors! In this case, I would actually try concatenating the entire previous sets but instead of copy-paste, attempt to be smart about it:

noCompMonolith: {
    src: function() {
        var src = [];
        src.push.apply(src, 'lib/jquery.js');
        src.push.apply(src, concat.bootstrapJS.src);
        src.push.apply(src, concat.dataTablesJS.src);
        return src;
    },
    dest: 'dev/js/application_monolith.js'
}

Bottom line:

  1. Concat different "components" separately. As I develop Grunt tasks, I may want Bootstrap but not the monolith. Or DataTables as a separate file. I want to keep my concerns separated in "purgatory" until I do something more with them.

  2. Do a second concat of these different "components"

Is there a known technique for doing this in Grunt? Were some of my ideas OK but the syntax was wrong?

Greg Pettit
  • 10,749
  • 5
  • 53
  • 72
  • your function does have undefined references; `concat` is not defined. Did you forget the quotes? – burnpanck Jun 30 '15 at 06:11
  • bumpanck, even just replacing the contents of the function with `var src = ['lib/jquery.js']; return src` generates an error. I just don't think you can use a function in the init object for some reason. That said, concat is defined. Here's a similar example of what's going on: http://jsfiddle.net/joca2mh2/ – Greg Pettit Jun 30 '15 at 06:26
  • D'oh, you are correct about the undefined, bumpanck! How would I access those arrays in this scope? Just out of curiousity, mind you, because a function that returns an array just straight-up doesn't seem to work. – Greg Pettit Jun 30 '15 at 07:18
  • Admittedly, I don't have much experience with `grunt`, and did never use `grunt-contrib-concat`. I have no idea if it accepts functions to specify files. Just thought I spotted a small error... – burnpanck Jun 30 '15 at 09:54
  • Kinda stumped. I changed the scope of the file arrays so that I could run a function.... aaaaand.... it still doesn't like stuff. Looks like node or grunt has prototyped the `apply` method, so the monolith array isn't getting concatenated as expected. Surely there's a Grunt-y way to do this? – Greg Pettit Jun 30 '15 at 14:05

1 Answers1

0

Oh gawd. So it's just typos. I had the right approach to begin with.

I was starting my paths in my src arrays with a leading slash. Apparently that's no good. I didn't notice that it was producing 0-byte Bootstrap and DataTables files. When you concat empty files... well... the results are obvious.

As a record to my own negligence, here's a correct and working concat object:

concat: {
    options: {
        stripBanners: false
    },
    bootstrapJS: {            
        src: [
            'lib/bootstrap/js/transition.js',
            'lib/bootstrap/js/alert.js',
            'lib/bootstrap/js/button.js',
            'lib/bootstrap/js/carousel.js',
            'lib/bootstrap/js/collapse.js',
            'lib/bootstrap/js/dropdown.js',
            'lib/bootstrap/js/modal.js',
            'lib/bootstrap/js/tooltip.js',
            'lib/bootstrap/js/popover.js',
            'lib/bootstrap/js/scrollspy.js',
            'lib/bootstrap/js/tab.js',
            'lib/bootstrap/js/affix.js'],
        dest: 'purgatory/js/bootstrap.js'
    },
    dataTablesJS: {
        src: [
            'lib/datatables/js/jquery.dataTables.js',
            'lib/datatables/js/dataTables.bootstrap.js'],
        dest: 'purgatory/js/dataTables.js'
    },
    noCompMonolith: {
        src: ['lib/jquery.js', '<%= concat.bootstrapJS.dest %>', '<%= concat.dataTablesJS.dest %>'],
        dest: 'dev/js/application_monolith.js'
    }
}
Greg Pettit
  • 10,749
  • 5
  • 53
  • 72