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