css - 使用 Grunt 输出多个 LESS 源映射？

Question

我有一个 Grunt 文件来将 LESS 文件编译为 CSS 文件，并创建一个 css.map 文件。太棒了。

我有多个 LESS 文件，我想执行此操作，但我无法弄清楚同时执行这两项操作的语法。

我有我需要的 theme.less 和 main.less - 编译 - 放入正确的文件夹中 - 并为每个生成一个 map 文件。

现在我有这个:

//LESS
    less: {
        development: {
            options: {
                compress: true,
                yuicompress: true,
                optimization: 2,
                sourceMap: true,
                sourceMapFilename: "<%= yeoman.app %>/live_preview/b/css/theme.css.map"

            },
            files: {
                // target.css file: source.less file
               // "<%= yeoman.app %>/live_preview/b/css/main.css": "<%= yeoman.app %>/less/main.less",
                "<%= yeoman.app %>/live_preview/b/css/theme.css": "<%= yeoman.app %>/less/theme.less"
            }
        }
    }

正如你所看到的，我注释掉了main.less。 Theme.less 编译并创建 map 文件，但我想同时执行这两个操作...

Answer 1

最糟糕的暴力方法是简单地定义第二个构建过程，并确保您的构建过程同时调用 less.development1 和 less.development2:

less: {
    "development1": {
        options: {
            compress: true,
            yuicompress: true,
            optimization: 2,
            sourceMap: true,
            sourceMapFilename: "<%= yeoman.app %>/live_preview/b/css/theme.css.map"

        },
        files: {
            // target.css file: source.less file
            "<%= yeoman.app %>/live_preview/b/css/theme.css": "<%= yeoman.app %>/less/theme.less"
        }
    },
    "development2": {
        options: {
            compress: true,
            yuicompress: true,
            optimization: 2,
            sourceMap: true,
            sourceMapFilename: "<%= yeoman.app %>/live_preview/b/css/main.css.map"

        },
        files: {
            // target.css file: source.less file
            "<%= yeoman.app %>/live_preview/b/css/main.css": "<%= yeoman.app %>/less/main.less"
        }
    }
}