Adding a Plugin (Concatenating Files)

Adding a Plugin (Concatenating Files)

Now that you have a Gruntfile, it is time to add your first plugin. Concatenation — combining multiple files into one — is one of the most common build tasks. In this episode you will install and configure the grunt-contrib-concat plugin.

Why Concatenate Files?

Problem	Solution
Multiple JS files = multiple HTTP requests	One concatenated file = one request
Slow page loads on HTTP/1.1	Faster loading with fewer requests
Managing script load order in HTML	One script tag instead of many
Scattered code across files	Single organized output file

Step 1: Install the Plugin

npm install grunt-contrib-concat --save-dev

This installs the concat plugin and adds it to your devDependencies.

Step 2: Configure the Task

Update your Gruntfile.js:

module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        concat: {
            options: {
                separator: ';\n',
                banner: '/* <%= pkg.name %> - v<%= pkg.version %> */\n',
            },
            dist: {
                src: ['src/js/module1.js', 'src/js/module2.js', 'src/js/module3.js'],
                dest: 'dist/js/bundle.js',
            },
        },
    });

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

    grunt.registerTask('default', ['concat']);

};

Understanding the Configuration

Property	Value	Purpose
options.separator	';\n'	Inserts a semicolon and newline between each file to prevent syntax errors
options.banner	'/* ... */\n'	Adds a comment at the top of the output file with the project name and version
dist.src	Array of file paths	The source files to concatenate, in order
dist.dest	'dist/js/bundle.js'	The output file where concatenated code is written

The <%= pkg.name %> syntax is a Grunt template string. It pulls the value from the pkg object defined in initConfig, which reads from your package.json.

Step 3: Run the Task

grunt

Since concat is registered as the default task, running grunt will concatenate all three source files into dist/js/bundle.js. You should see output like:

Running "concat:dist" (concat) task
Done, without errors.

The Output File

Open dist/js/bundle.js and you will see all three modules combined into one file with the banner at the top:

/* grunt-project - v1.0.0 */
// Module 1: Utility functions
function greet(name) {
    return 'Hello, ' + name + '!';
}

function add(a, b) {
    return a + b;
};
// Module 2: DOM helpers
function getElement(selector) {
    return document.querySelector(selector);
}
...

File Order Matters

The order of files in the src array determines the order in the output. This is critical when files depend on each other — a file that uses a function must come after the file that defines it.

// CORRECT order — definitions before usage
src: ['src/js/module1.js', 'src/js/module2.js', 'src/js/module3.js']

// WRONG order — module3 uses greet() from module1
src: ['src/js/module3.js', 'src/js/module1.js', 'src/js/module2.js']

Using Glob Patterns

// All JS files in src/js/ (alphabetical order)
src: ['src/js/*.js']

// Specific order with glob for the rest
src: ['src/js/utils.js', 'src/js/helpers.js', 'src/js/*.js']
// Note: Grunt automatically deduplicates — files won't be included twice

// Exclude specific files
src: ['src/js/*.js', '!src/js/debug.js']

Multiple Targets

You can define multiple targets to concatenate different sets of files:

concat: {
    js: {
        src: ['src/js/*.js'],
        dest: 'dist/js/bundle.js',
    },
    css: {
        src: ['src/css/*.css'],
        dest: 'dist/css/styles.css',
    },
}

# Run all concat targets
grunt concat

# Run only the js target
grunt concat:js

# Run only the css target
grunt concat:css

Useful Concat Options

Option	What It Does
separator	String inserted between concatenated files
banner	String prepended to the output file
footer	String appended to the end of the output file
stripBanners	Removes block comments (/* */) from source files
sourceMap	Generates a source map for debugging

Key Takeaways

• Install plugins with npm install plugin-name --save-dev and load them with grunt.loadNpmTasks()
• grunt-contrib-concat combines multiple files into one output file
• File order in the src array matters — dependencies must be listed before the files that use them
• Grunt template strings (<%= pkg.name %>) pull values from the config object
• A single task can have multiple targets for different file sets
• Use the separator option to prevent syntax errors between concatenated files