4

I want to generate .css partial files from the corresponding .less files

I use the latest versions available from npm, grunt@0.4.0, grunt-contrib-less@0.5.0

Prior to Grunt version 0.4 I could simply specify the pattern:

htdocs/less/*.less as source

htdocs/css/*.css as destination

and all the files from the folder htdocs/less would be generated into the folder htdocs/css

Since v0.4 the destination pattern does no longer work, all files from the folder htdocs/less are concatenated into one file named *.css

How can I configure the task that it generates all files instead concatenating them into one file.

I do not want list the files individually.

Couldn't find an answer in the Grunt documentation http://gruntjs.com/configuring-tasks#files does

Thank You.

My Gruntfile.js (extract):

module.exports = function (grunt) {
    grunt.initConfig({
        less: {
            development: {
                files: {
                    "htdocs/css/*.css": "htdocs/less/*.less"
                }
            }
        },
    });
};
user2157720
  • 53
  • 1
  • 3

2 Answers2

14

You'd want to read the Building the files object dynamically section in the docs.

This would be a direct translation from your current config:

module.exports = function (grunt) {
    grunt.initConfig({
        less: {
            development: {
                files: [{
                    expand: true,        // Enable dynamic expansion.
                    cwd: 'htdocs/less',  // Src matches are relative to this path.
                    src: ['*.less'],     // Actual pattern(s) to match.
                    dest: 'htdocs/css',  // Destination path prefix.
                    ext: '.css',         // Dest filepaths will have this extension.
                }]
            }
        },
    });
};
Sindre Sorhus
  • 62,972
  • 39
  • 168
  • 232
  • Thanks Sindre, exactly what I needed, I knew that page already, but I did not associate the title with my problem. – user2157720 Mar 14 '13 at 23:02
0

Have a look at assemble-less as well. It's based on grunt-contrib-less but is specifically geared towards what you're looking to do. (full disclosure, I'm a maintainer of the project as well).

For this specific use-case, the advantage that assemble-less has over grunt-contrib-less is that it has a concat: false option that enables you to compiles LESS files individually using any of the src-dest patterns in Grunt. assemble-less also has a require option that will automatically prepend "global" less files (such as variables.less or mixins.less) onto all of the other specified less files, negating the need to actually add @import statements inside each less file.

So, for example, with assemble-less you would do:

  less: {
    development: {
      options: {
        concat: false
      }
      files: {
        "htdocs/css/": "htdocs/less/*.less"
      }
    }
  }
jonschlinkert
  • 10,872
  • 4
  • 43
  • 50