grunt-contrib-less

What is grunt-contrib-less?

The grunt-contrib-less package is a Grunt plugin that compiles LESS files to CSS. It provides a variety of options to customize the compilation process, such as specifying source maps, compressing the output, and including additional paths for @import directives.

What are grunt-contrib-less's main functionalities?

Basic Compilation

This feature allows you to compile LESS files into CSS. The 'paths' option specifies directories to scan for @import directives.

{
  "less": {
    "development": {
      "options": {
        "paths": ["assets/css"]
      },
      "files": {
        "path/to/result.css": "path/to/source.less"
      }
    }
  }
}

Source Maps

This feature enables the generation of source maps, which help in debugging by mapping the compiled CSS back to the original LESS source.

{
  "less": {
    "development": {
      "options": {
        "sourceMap": true,
        "sourceMapFilename": "path/to/result.css.map",
        "sourceMapURL": "result.css.map"
      },
      "files": {
        "path/to/result.css": "path/to/source.less"
      }
    }
  }
}

Compression

This feature allows you to compress the output CSS, reducing file size for production environments.

{
  "less": {
    "production": {
      "options": {
        "compress": true
      },
      "files": {
        "path/to/result.min.css": "path/to/source.less"
      }
    }
  }
}

Custom Functions

This feature allows you to define custom functions that can be used within your LESS files.

{
  "less": {
    "development": {
      "options": {
        "functions": {
          "add": function(less, a, b) {
            return a + b;
          }
        }
      },
      "files": {
        "path/to/result.css": "path/to/source.less"
      }
    }
  }
}

Other packages similar to grunt-contrib-less

less

The 'less' package is the official LESS compiler. It can be used directly via the command line or integrated into build systems. It offers similar functionalities to grunt-contrib-less but does not provide the Grunt-specific integration.

gulp-less

The 'gulp-less' package is a Gulp plugin for compiling LESS files. It offers similar functionalities to grunt-contrib-less but is designed to work within the Gulp task runner ecosystem.

less-loader

The 'less-loader' package is a Webpack loader for compiling LESS files. It integrates LESS compilation into the Webpack build process, offering similar functionalities but within the Webpack ecosystem.

README

grunt-contrib-less

Compile LESS files to CSS.

Getting Started

Install this grunt plugin next to your project's grunt.js gruntfile with: npm install grunt-contrib-less

Then add this line to your project's grunt.js gruntfile:

grunt.loadNpmTasks('grunt-contrib-less');

Overview

Inside your grunt.js file add a section named less. This section specifies the files to compile and the options passed to LESS.

Parameters

files object

This defines what files this task will process and should contain key:value pairs.

The key (destination) should be an unique filepath (supports grunt.template) and the value (source) should be a filepath or an array of filepaths (supports minimatch).

As of v0.3.0, you can use *.{ext} as your destination filename to individually compile each file to the destination directory. Otherwise, when the source contains an array of multiple filepaths, the contents are concatenated in the order passed.

options object

This controls how this task (and its helpers) operate and should contain key:value pairs, see options below.

Options

paths string|array

This specifies directories to scan for @import directives when parsing. Default value is the directory of the source, which is probably what you want.

compress boolean

If set to true, the generated CSS will be minified.

yuicompress boolean

If set to true, the generated CSS will be minified with YUI Compressor's CSS minifier.

Config Example

less: {
  development: {
    options: {
      paths: ["assets/css"]
    },
    files: {
      "path/to/result.css": "path/to/source.less"
    }
  },
  production: {
    options: {
      paths: ["assets/css"],
      yuicompress: true
    },
    files: {
      "path/to/result.css": "path/to/source.less"
    }
  }
}

--

Task submitted by Tyler Kellen.