Geek asks and answers

How to configure sourceMaps for LESS using Grunt if your project has more than one file?

I have several .less files that I want to process before they match .css with sourceMaps for each file, all in the same folder as the source.

How difficult is it?

I have no problem doing this with less, but I can't figure out how to do this in grunt-contrib-less, as it seems that sourceMapFilename is the only hardcoded value.

This is my grunt file:

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

+3
source share
2 answers

. . , / (< 10?). http://gruntjs.com/configuring-tasks#task-configuration-and-targets

( ), (sourceMapFilename sourceMapURL). http://gruntjs.com/configuring-tasks#options

, sourceMapFilename , . , LESS ( > 10?).

+1

grunt-contrib-less , .: https://github.com/gruntjs/grunt-contrib-less/issues/89

grunt.file, , . : LESS CSS

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 );  
};

, :

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

running grunt :

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

, :

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);
0

More articles:


All Articles