How to make couple of minified files from different js files using grunt

Question

I am new to grunt and task runners in JS, so this might seem a simple question but I have been unable to find exact working answer.

I have :

concat: {
            options: {
                // define a string to put between each file in the concatenated output
                separator: '\n\n'
            },
            dist: {
                // the files to concatenate
                src: ['scripts/app.js', 'scripts/constant.js'
                ],
                // the location of the resulting JS file
                dest: 'scripts/custom.js'
            }
        },

This task collects all my custom file together. What I want is to do similar thing for all my vendors file. Finally I should end up with two js only custom.js having my concatenated-minified code and vendor.js having concatenated-minfied libraries.

How do I write grunt configuration for this. Do I need to make two different tasks. If I write the above code twice with different input files, it seems to run the last code.

Answer 1

grunt-contrib-concat can be configured to utilize multiple-targets.

For further documentation on this subject refer to multi-tasks and Task Configuration and Targets in the grunt documentation.

Gruntfile.js

For your scenario you need to configure your concat task similar to this (Note: the new custom and vendor targets):

module.exports = function(grunt) {

    grunt.initConfig({

        concat: {
            options: {
                separator: '\n\n'
            },
            custom: {
                src: ['scripts/app.js', 'scripts/constant.js'],
                dest: 'scripts/output/custom.js'
            },
            vendor: {
                // Modify the src and dest paths as required...
                src: ['scripts/vendor/foo.js', 'scripts/vendor/baz.js'],
                dest: 'scripts/output/vendor.js'
            }
        }

    });

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

    grunt.registerTask('concatenate', [
        'concat:custom', // <-- Targets in a task are called using a colon separator. 
        'concat:vendor'
    ]);

};

Running concat

Using the example gist provided above you can run the concat task via the CLI by typing the following command:

$ grunt concatenate

Configuring Options

If you require different configuration options for both the custom and vendor targets you will need to move the options object inside their respective targets. As explained here.

Note: Using the example gist provided the options specified will apply to both targets.