How to specify file order with Grunt?

Question

I've just started using Grunt, and I'm trying to get the concat task to concat my files in a specific order. Here's what I've got:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';'
            },
            dist: {
                src: ['www/js/*.js','www/js/main.js','!**/*.{min,pack}.js','!<%= concat.dist.dest %>','!<%= uglify.dist %>'],
                dest: 'www/js/<%= pkg.name %>.js'
            }
        },

I was hoping that by putting www/js/main.js second, it would move the file down to the bottom of the list, but that doesn't appear to be the case.

How can I impose some order on the list of files it matches?

What's `[minimatch]` and how is it relevant to your question? It's mentioned in passing only once in an answer, and then without any context. It's not clear how it requires a new tag. — Charles, Nov 30 '13 at 01:36
[minimatch](https://github.com/isaacs/minimatch) is the de-facto file matching library used internally by node/npm and many node-based projects. It's also used by Grunt. It's relevant because the `src` array is passed off to it. — mpen, Nov 30 '13 at 23:55

score 15 · Accepted Answer · answered Nov 29 '13 at 19:13

Your problem is that main.js is matched by the first pattern so the second pattern is made redundant. This might seem like a hacky way of doing it but basically you have to exclude it from the first pattern before you include it in the second; like so:

    concat: {
        options: {
            separator: ';'
        },
        dist: {
            src: ['www/js/*.js', '!www/js/main.js', 'www/js/main.js','!**/*.{min,pack}.js','!<%= concat.dist.dest %>','!<%= uglify.dist %>'],
            dest: 'www/js/<%= pkg.name %>.js'
        }
    }

Note that when using minimatch pattern order is important.

score 5 · Answer 2 · answered Jul 03 '14 at 10:34

5

I just found https://github.com/miensol/grunt-concat-in-order.

With that you could create a main js file, where you specify the order of your other javascript files with multiple @depend expressions.

answered Jul 03 '14 at 10:34

Sascha

858
1
16
30

How to specify file order with Grunt?

2 Answers2