Grunt.js：连接来自不同目录的多个 CSS 文件时替换路径

Question

我正在尝试使用来自不同目录的 Grunt.js concat 和 cssmin 来缩小和合并多个 CSS 文件。 不幸的是，css 会中断，因为每个 CSS 都有相对于资源的链接，例如：

background-image: url('images/background.jpg');

我试图在网上找到答案，但没有任何运气。这是 Gruntfile.js 代码中的一个示例，它结合了 2 个不同的 WP 插件 CSS 文件：

module.exports = function (grunt) {
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    concat: {
        iphorm_woocommerce: {
            src: [
                '../wp-content/plugins/iphorm-form-builder/css/styles.css',
                '../wp-content/plugins/woocommerce/assets/css/select2.css',
                '../wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css',
                '../wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css',
                '../wp-content/plugins/woocommerce/assets/css/woocommerce.css',
            ],
            dest: '../wp-content/plugins/woocommerce/assets/css/combined.css'
        }
    }
    })
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['concat']);
};

Answer 1

试试看

cssmin : {
            options: {
                rebase: true,
                relativeTo: './'
            },
            target : {
                src : <your sources>,
                dest : "dest directory"
            }
        }