CODEWITHSUNDEEP
lessgruntjssource-maps
blackmamba
blackmamba

Reputation: 757

How to configure sourceMaps for LESS using Grunt when there is more than one file in your project?

I have multiple .less files that I want processed to their matching .css with sourceMaps for each file all in the same folder as the source.

How hard can that be?

I have no problem in doing this directly with less but cant figure out how to do this in grunt-contrib-less as it seems to want the sourceMapFilename to be a single hard coded value.

This my gruntfile:

module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
watch: {
  options: {
    livereload: true,
  },
  css: {
    files: ['./core/theme/**/*.less'],
    tasks: ['less'],
    options: {
      spawn: false
    },
  },
},
less: {
  all: {
    src: ['./core/theme/**/*.less'],
    expand: true,  
    dest: "./core/theme/",
    options:{sourceMap:true},
rename:function (dest, src) {
        return src.substring(0, src.lastIndexOf('.'))+'.css';
    }
  },
}   
});
// on watch events configure less:all to only run on changed file
grunt.event.on('watch', function(action, filepath) {
  grunt.config('less.all.src', filepath);
});

grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-less");

grunt.registerTask("default", ["less"]);
};

TIA

Upvotes: 3

Views: 1353

Answers (2)

Bass Jobsen
Bass Jobsen

Reputation: 49054

Currently grunt-contrib-less has not got such an option, see: https://github.com/gruntjs/grunt-contrib-less/issues/89

You can use grunt.file to get a list of your less files and than automatically generate your task per file, see also: Compile LESS to multiple CSS files, based on variable value

Gruntfile.js:

module.exports = function (grunt) {
  'use strict';
grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
});

var allTaskArray = [];
var tasks = {};

grunt.file.recurse('less/', function(abspath, rootdir, subdir, filename)
{
    if(filename.match(/\.less$/g)){
        var name = filename.substring(0, filename.lastIndexOf('.'));
        tasks[name] = {options: {sourceMap:true},files:{} };
        tasks[name]['options']['sourceMapFilename'] = 'dist/' + name + '.map.css';
        tasks[name]['files']['dist/' + name + '.css'] = abspath;
        allTaskArray.push('less:' + name);
    }

});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.config('less',tasks);
grunt.registerTask( 'default', allTaskArray );  
};

When you file structure looks like that shown below:

less
├── less2
│   └── main2.less
└── main.less

running grunt will result in:

Running "less:main2" (less) task
File dist/main2.map.css created.
File dist/main2.css created: 24 B → 66 B

Running "less:main" (less) task
File dist/main.map.css created.
File dist/main.css created: 24 B → 65 B

Notice that you can also add dynamically your watch task as follows:

grunt.loadNpmTasks('grunt-contrib-watch');
var watch = {
  options: {
    livereload: true,
  },
  css: {
    files: ['./less/**/*.less'],
    tasks: [],
    options: {
      spawn: false
    },
  }
};
watch['css']['tasks'] = allTaskArray;
grunt.config('watch',watch);

Upvotes: 0

jpblancoder
jpblancoder

Reputation: 673

You could define multiple targets. Each target compiles a specific less file. Assuming that you have a reasonable/limited list of less files to compile (< 10?). http://gruntjs.com/configuring-tasks#task-configuration-and-targets

Define common task-level options (less compile options), then target specific options (sourceMapFilename & sourceMapURL). http://gruntjs.com/configuring-tasks#options

I'm not sure how to set the sourceMapFilename dynamically, but I will look into this later. It would be necessary if you were compiling many LESS files (> 10?).

Upvotes: 1

Related Questions