Steve Steve - 6 months ago 26
CSS Question

Output multiple LESS source maps with Grunt?

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

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