multiple source/dest concats?

[toddzebert]

Something like:

bower_concat: {
  js_header: {
    include: [
      'package_1',
      'package_2'
      ],
    dest: 'build/_bower_header.js',
  },
  js_footer: {
    include: [
      'package_3',
      'package_4'
      ],
    dest: 'build/_bower_footer.js',
  },
  js_other: {
    include: [
      'package_1',
      'package_4'
      ],
    dest: 'build/_bower_other.js',
  },
}

[sapegin]

I suppose you have read docs for Grunt and this plugin, add this code to your Gruntfile and it didn’t work as you expected (of course after reading the docs). But you were so exhausted that you forgot to describe what was wrong. Please do that now.

[toddzebert]

I was expecting something along with way concat works with tasks like 'dev' and 'dist' and within them files: [ { src: {}, dest: {} }, { src: {}, dest: {} }, /* etc */ ]

It seems I have to make each set of files a diff task, so while this ran without error:

module.exports = function(grunt) {

  grunt.initConfig({

    bower_concat: {
      a_js: {
        include: [
          'bower-test-a' // no dependencies
        ],
        dest: 'a.js'
        // cssDest: 'a.css',
      },
      b_js: {
        include: [
          'bower-test-b' // has -a as dependency
        ],
        dest: 'b.js'
        // cssDest: 'b.css',
      },
      bandc_js: {
        include: [
          'bower-test-b', // has -a as dependency
          'bower-test-c' // no dependencies
        ],
        dest: 'bandc.js'
        // cssDest: 'bandc.css',
      },
      all: {
        dest: 'all.js'
        // cssDest: 'all.css',
      }
    }

  });

  grunt.loadNpmTasks('grunt-bower-concat');

  grunt.registerTask('default', [
    'bower_concat:a_js',
    'bower_concat:b_js',
    'bower_concat:bandc_js',
    'bower_concat:all'
    ]);

};

It did not pull in dependencies from bower, ex: b_js created b.js with bower-test-b but without it's dependency bower-test-a.

All of bower-test-* have a bower.json with mainfile (which grunt -v shows as being found) and dependencies set (which work since bower pulls in dependencies).

So does using an 'include' exclude dependencies? Or what am I doing wrong?

[sapegin]

Yep, include makes it more like regular concat. Because otherwise you could have the same component in a few different bundles (if components from that bundles depend on it) which is not what you want when you’re creating separate bundles (for example, for different pages).

[toddzebert]

Hmmm. What I want is to not load all my JS on every page, so to be able to create separate bundles per (type of) page, but still not have to worry about dependencies and concat order (because that's already defined in Bower). I've been searching everywhere but I can't find a solution. Any thoughts?

[sapegin]

They will be in the right order, no matter in which order you specify them in the include. But you need to specify all dependencies too.

I’m not sure how to make it better.

[toddzebert]

Yeah, I don't want to have to specify dependencies - that's what I was doing before manually with regular concat.

Perhaps an option that turns on dependency loading even when using include, with a warning if you're not using it correctly you could load some packages twice?

[sapegin]

Yeah, that would work. It would be great if you could create a pull request with that feature.

[toddzebert]

I'm not up on creating Grunt plugins, but I know JS.

It looks like the section in question that short circuits the dependency checking/loading is this in function bowerMainFiles() :

 _.each(lists.components, function(component, name) {
  if (includes.length && _.indexOf(includes, name) === -1) return;
  if (excludes.length && _.indexOf(excludes, name) !== -1) return;

I'm thinking a "forceDependencies" option that overrides the above if statements with a (!options.forceDependencies) conditional.

If I'm on right track it seems like it shouldn't be too difficult for me to add this functionality in a PR.

[Shino-]

I think I'm having the same problem. Given the example given here, it looks like we should be able to do it, but grunt tells me Required config property "bower_concat.subitem" missing when I try to do bower_concat:subitem and You should specify "dest" and/or "cssDest" properties in your Gruntfile when I try to do bower_concat.

That said, there's a possibility that my syntax is wrong somewhere... but I triple checked it, and even rebuilt it from scratch using the example.

[sapegin]

@Shino-, until you show me your gruntfile I could’t tell you what’s wrong with it.

[sapegin]

@toddzebert, I think it would be easier to add all the dependencies of “included” components to the include array itself before _.each(lists.components loop at line 97.

And I don’t like the name forceDependencies. Probably something like includeWithDependencies would be more clear.

[Shino-]

@sapegin ok, here's the current version of the task with only one element.

'use strict';

module.exports = function bower_concat(grunt) {
    // Load task
    grunt.loadNpmTasks('grunt-bower-concat');

    // Options
    return {
        bower_concat: {
            components: {
                dest: 'public/js/components.js',
                dependencies: {
                    'jquery-ui': 'jquery',
                    'jquery-cookie': 'jquery',
                    'jquery-validation': 'jquery',
                    'dustjs-linkedinhelpers': 'dustjs-linkedin'
                },
                exclude: [
                    'doc-ready',
                    'eventEmitter',
                    'eventie',
                    'fizzy-ui-utils',
                    'get-size',
                    'get-style-property',
                    'jquery-hashchange',
                    'jquery-mobile-bower',
                    'jquery-mobile',
                    'jquery-ui-tabs',
                    'matches-selector',
                    'outlayer'
                ],
                mainFiles: {
                    'jquery': 'dist/jquery.min.js',
                    'modernizr': 'modernizr.js',
                    'jquery-ui': ['ui/effect.js','ui/effect-puff.js','ui/effect-scale.js','ui/effect-size.js'],
                    'imagesloaded': 'imagesloaded.pkgd.min.js',
                    'masonry': 'dist/masonry.pkgd.min.js',
                    'jquery-cookie': 'jquery.cookie.js',
                    'dustjs-linkedin': 'dist/dust-core.min.js',
                    'dustjs-linkedin-helpers': 'dist/dust-helpers.min.js',
                    'jquery-validation': 'dist/jquery.validate.min.js'
                }
            }
        }
    };
};

The gruntfile has grunt.registerTask('build', [ 'stuff', 'bower_concat:components', 'otherstuff' ]);.

[toddzebert]

@Shino- While I think you have a different issue than I, I don't see any problem with your bower_concat syntax. Although, I'm not familiar with your use of return-ing the options - in my file I use grunt.initConfig() which works correctly (although not as I hoped).