grunt-wiredep - Want to get dependencies written into file

Question

The common use of grunt-wiredep is to scan through your given HTML and inject the relevant dependencies into that HTML.

I'm looking to instead get the JS & CSS dependencies, in the order as determined by wiredep, concat them into a single JS and single CSS file and write those files.

I can see that wiredep itself is happy to return an object with an ordered list but the syntax for getting Grunt to write these into files is beyond me.

Does anyone know if this is possible and what the syntax would be? The first thing that all grunt-wiredep tasks start with is a source HTML file and that's not what I'm looking to do.

Any advice appreciated!

Answer 1

So the way I finally overcame this with a colleague is remarkably simple.

I set up a new Grunt task to get the object I needed from the node Wiredep process as here:

    grunt.registerTask('bower-bundler', function () {
      var result = require('wiredep')();
      grunt.config.set('concat.wiredepCSS.src', result.css);
      grunt.config.set('concat.wiredepJS.src', result.js);
    });

The grunt.config.set() allows you to set a task's source outside of it's config block.

Answer 2

Thanks for your solution!

I've added some extra details, so it works out of the box:

//Put all bower files in one file
grunt.registerTask('bower-bundler', function() {

    //Point to the file which source you need to bundle
    var result = require('wiredep')({
        src: ['index.html']
    });

    //Set grunt config for concat task based on result.js and add an output file
    grunt.config.set('concat.withWiredepJS', {
        src: [
            result.js
        ],
        dest: 'build/lib_min.js'
    });

    //Run the task right away
    grunt.task.run('concat:withWiredepJS');
});