Question

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

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

我试图在网上找到答案，但没有运气。以下是Gruntfile.js代码中的一个示例，它结合了两个不同的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"
            }
        }

Grunt.js：从不同目录

1 个答案: