Output multiple LESS source maps with Grunt?

Question

I have a Grunt file to compile my LESS file into a CSS file, and create a css.map file as well. Great.

I have more than one LESS file I want to do this for though but I can't figure out the syntax to do both.

I have theme.less and main.less that I need - compiled - put into the right folder - and a map file generated for each.

Right now I have this:

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

As you can see I commented out main.less. Theme.less compiles and the map file is created, but I'd like to do both...

Answer 1

The crummy brute-force method is to simply define a second build process and make sure that your build processes call both less.development1 and 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

There is currently no way to do this with grunt-contrib-less, see https://github.com/gruntjs/grunt-contrib-less/issues/89

Your only option is to inline your source maps in the CSS file by setting outputSourceFiles:true . In my experience this is actually the most convenient way to handle your maps anyway.

The only downside is that it will require that you have a minifier set up, since inlining the maps will likely more than double the size of your CSS files but will be easily stripped by a minifier.

Answer 3

Try this:

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

Let me know.