Question

我有一个Grunt文件将我的LESS文件编译成CSS文件，并创建一个css.map文件。大。

我有多个LESS文件我想这样做，但我无法弄清楚两者的语法。

我需要theme.less和main.less - 编译 - 放入正确的文件夹 - 以及为每个人生成的地图文件。

现在我有这个：

//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编译并创建了地图文件，但我想同时做两个......

Answer 1

crummy暴力方法是简单地定义第二个构建过程，并确保构建过程同时调用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"
        }
    }
}

Answer 2

目前无法使用grunt-contrib-less执行此操作，请参阅https://github.com/gruntjs/grunt-contrib-less/issues/89

您唯一的选择是通过设置outputSourceFiles:true来在CSS文件中内联您的源地图。根据我的经验，这实际上是处理地图的最便捷方式。

唯一的缺点是它需要你设置一个minifier，因为内联地图可能会比CSS文件的大小增加一倍，但很容易被缩小器剥离。

Answer 3

试试这个：

files: {
  'assets/css/main.min.css': [
    'assets/less/app.less',
    'assets/less/app2.less'
  ]
},

让我知道。

使用Grunt输出多个LESS源地图？

3 个答案: