如何使用 grunt-recess 编译 2 个单独的 LESS 文件答案

【问题标题】：How to compile 2 separate LESS files with grunt-recess如何使用 grunt-recess 编译 2 个单独的 LESS 文件
【发布时间】：2013-10-13 17:41:03
【问题描述】：

我想用 grunt 的凹槽编译 2 个单独的文件：

recess: {
            dist: {
                options: {
                    compile: true
                },
                files: {
                    'path/css/custom.css': ['path/less/custom.less'],
                    'path/css/animate.css': ['path/less/antimate.less'],

                },
            },
        },

在 grunt 退出之前，只有第一个文件正在编译。我哪里错了？

【问题讨论】：

标签： css less gruntjs recess twitter-recess

【解决方案1】：

你应该试试这个

recess: {
    dist: {
        options: {
            compile: true
        },
        files: [
            {src: ['path/less/custom.less'], dest: 'path/css/custom.css'},
            {src: ['path/less/antimate.less'], dest: 'path/css/animate.css'}
        ],
    }
},

或者您可以启用动态扩展来编译文件夹中的每个 .less：

recess: {
    dist: {
        options: {
            compile: true
        },
        files: [
            {
                expand: true,            // Enable dynamic expansion.
                cwd: 'path/to/less',     // Src matches are relative to this path.
                src: ['*.less'],         // Actual pattern(s) to match.
                dest: 'path/to/css/',    // Destination path prefix.
                ext: '.css',             // Dest filepaths will have this extension.
            },
        ],
    },
},

更多参考请见http://gruntjs.com/configuring-tasks。

【讨论】：

【解决方案2】：

像这样：

recess: {
    dist: {
        options: {
            compile: true
        },
        files: {
            'dist/combined.css': [
                'src/main.css',
                'src/component.css'
            ]
        }
    }
}

【讨论】：