How to minify and combine within grunt cssmin targets?

Question

I am trying to set two targets (dev and build) within a cssmin task in gruntfile.js. This answer cleared some of my confusion from reading the doc on npm, but I can't get both minify and combine to work. To simplify I'll focus just on the dev task, since build would be a simple variation.

I tried this:

cssmin: {
    dev: {
        options: {
            report: "min"
        },
        src: "<%= buildpath %>/css/customStep1.css",
        dest: "<%= buildpath %>/css/customStep2.css",
        combine: {
            files: {
                "<%= distpath %>/css/main.css": ["<%= buildpath %>/css/customStep2.css", "<%= buildpath %>/css/otherfile.css"]
            }
        }
    }
}

And this:

cssmin: {
    dev: {
        options: {
            report: "min"
        },
        src: "<%= buildpath %>/css/customStep1.css",
        dest: "<%= buildpath %>/css/customStep2.css",
        files: {
            "<%= distpath %>/css/main.css": ["<%= buildpath %>/css/customStep2.css", "<%= buildpath %>/css/otherfile.css"]
        }
    }
}

Both do create/minify customStep2.css, but neither then does the combine part (i.e. main.css does not get created). Thanks for any help.

score 1 · Answer 1 · answered Aug 20 '14 at 20:54

I ended up resolving this by creating a separate target for the combine part (the production build process adds uncss - not shown here - to the process, which is too slow and not necessary during development):

cssmin: {
        dev: {
            options: {
                report: "min"
            },
            src: "<%= buildpath %>/css/customStep1.css",
            dest: "<%= buildpath %>/css/customStep3.css",
        },
        build: {
            options: {
                report: "gzip"
            },
            src: "<%= buildpath %>/css/customStep2.css",
            dest: "<%= buildpath %>/css/customStep3.css",
        },
        combine: {
            files: {
                "<%= distpath %>/css/main.css": ["<%= buildpath %>/css/customStep3.css", "<%= buildpath %>/css/otherfile.css"]
            }
        }
    }

Then called like this:

grunt.registerTask("devcss", ["less:dev", "cssmin:dev", "cssmin:combine", "cssmetrics:dev"]); // CSS build for dev
grunt.registerTask("buildcss", ["less:build", "uncss:build", "cssmin:build", "cssmin:combine", "cssmetrics:build"]); // Whole CSS build for deployment

score 1 · Answer 2 · answered Oct 10 '14 at 07:49

Your config is not working because you are mixing several diffrent ways to specify files. src-dest is one way, files is another one. Also combine is not a grunt keyword, but just the name of the task (toto or abcd would be the same).

Here is a much simpler solution, but I don't know if it fits your needs :

cssmin: {
    dev: {
        options: {
            report: "min"
        },
        src: ["<%= buildpath %>/css/customStep1.css", "<%= buildpath %>/css/otherfile.css"],
        dest: "<%= distpath %>/css/main.css",
    }
}

Yes, I figured that out as per my self-answer, but your answer might help others struggling with how to structure grunt tasks. — otravers, Oct 11 '14 at 12:39

How to minify and combine within grunt cssmin targets?

2 Answers2