Grunt files api created unwanted files

Question

I have the following piece of code in my Gruntfile.js:

    less: {
        dist: {
            options: {
                paths: ['less/**/*.less'],
                cleancss: true,
                strictImports: true,
                strictUnits: true
            },
            expand: true,
            cwd: 'src',
            src: 'less/style.less',
            dest: 'tmp/less.css'
        }
    },

My goal is to parse all less files in /src/less/**/*.less (currently only style.less ) to a css file in tmp/less.css . Instead the file tmp/less.css/less/style.less is created. I noticed similar behaviour for other grunt plugins, so I don't think this has anything to do with the less plugin itself. I know I don't have to use expand and cwd , but I'm trying to understand the Grunt files api for a more complex configuration. What am I doing wrong?

Answer 1

Typically you will only want to output one or two files (to reduce CSS requests) so it makes more sense for LESS to specify the compile targets explicitly. So a simpler setup similar to yours is probably preferable.

less: {
    dist: {
        files: {
            'src/tmp/less.css': 'src/less/style.less',
            'src/tmp/less2.css': 'src/less/style.less'
        },
        options: {
            cleancss: true,
            strictImports: true,
            strictUnits: true
        }
    }
},

---

Something like this should take all .less files in a less dir and output them with the same folder structure in a tmp dir:

less: {
    dist: {
        files: [{
            expand: true,
            cwd: 'src',
            src: ['less/**/*.less'],
            dest: 'tmp/',
            ext: '.css'
        }],
        options: {
            cleancss: true,
            strictImports: true,
            strictUnits: true
        },
    }
}