Grunt 0.4 less task: how to not concatenate destination files

Question

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 0.4, you can simply specify a template:

htdocs/less/*.less as a source

htdocs/css/*.css as the destination

and all files from the htdocs/less folder will be generated in the htdocs/css folder

Since the v0.4 destination pattern no longer works, all files from the htdocs/less folder htdocs/less merged into a single file named *.css

How can I set up a task so that it generates all the files and then combining them into a single file.

I do not want to list files individually.

Could not find an answer in the Grunt documentation http://gruntjs.com/configuring-tasks#files

Thanks.

My Gruntfile.js (extract):

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

Answer 1

You would like to read the section Creating a dynamic file in documents.

This will be a direct translation from the current configuration:

 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. }] } }, }); }; 

Answer 2

Take a look at assemble-less . It is based on grunt-contrib-less, but is specifically focused on what you want to do. (full disclosure, I also support the project).

In this particular use case, the advantage of assemble-less is that it has concat: false which allows you to compile LESS files individually using any of the src-dest templates in Grunt. In addition, the collector has the require option, which automatically adds smaller “global” files (such as variables.less or mixins.less) to all other smaller files specified, which negates the need to add @import inside each smaller file.

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

  less: { development: { options: { concat: false } files: { "htdocs/css/": "htdocs/less/*.less" } } }