Question

我正在尝试在gruntfile.js中的cssmin任务中设置两个目标（dev和build）。 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

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

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不是一个咕噜关键字，但只是任务的名称（toto或abcd会相同）。

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

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

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

2 个答案: