如何缩小和组合内grunt cssmin目标

Question

我试图在gruntfile.js中的cssmin任务中设置两个目标(开发和构建)。这个答案澄清了我在阅读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也不是grunt关键字，而只是任务的名称(toto或abcd将是相同的)。

这里有一个更简单的解决方案，但我不知道它是否适合你的需要:

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