如何在 grunt cssmin 目标中缩小和组合？

Question

我正在尝试在 gruntfile.js 的 cssmin 任务中设置两个目标（开发和构建）。 This answer 消除了我阅读 doc on npm 时的一些困惑，但我无法同时缩小和合并工作。为简化起见，我将只关注开发任务，因为构建将是一个简单的变体。

我试过这个：

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"]
            }
        }
    }
}

还有这个：

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"]
        }
    }
}

两者都创建/缩小 customStep2.css，但组合部分也没有（即 main.css 没有被创建）。感谢您的帮助。

Answer 1

我最终通过为组合部分创建一个单独的目标解决了这个问题（生产构建过程将 uncss - 此处未显示 - 添加到过程中，这太慢且在开发过程中没有必要）：

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"]
            }
        }
    }

然后这样调用：

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

Answer 2

您的配置不起作用，因为您混合了几种不同的方式来指定文件。 src-dest 是一种方式，files 是另一种方式。此外，combine 不是 grunt 关键字，而只是任务的名称（toto 或 abcd 相同）。

这是一个更简单的解决方案，但我不知道它是否符合您的需求：

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