grunt-contrib-less
Advanced tools
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.
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"
}
}
}
}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.
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.
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.
Compile LESS files to CSS.
This plugin requires Grunt ~0.4.0
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-contrib-less --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-contrib-less');
This plugin was designed to work with Grunt 0.4.x. If you're still using grunt v0.3.x it's strongly recommended that you upgrade, but in case you can't please use v0.3.2.
Run this task with the grunt less command.
Task targets, files and options may be specified according to the grunt Configuring tasks guide.
Type: String|Array
Default: Directory of input file.
Specifies directories to scan for @import directives when parsing. Default value is the directory of the source, which is probably what you want.
Type: Boolean
Default: false
Compress output by removing some whitespaces.
Type: Boolean
Default: false
Compress output using clean-css.
Type: Boolean
Default: true
Enforce the css output is compatible with Internet Explorer 8.
For example, the data-uri function encodes a file in base64 encoding and embeds it into the generated CSS files as a data-URI. Because Internet Explorer 8 limits data-uris to 32KB, the ieCompat option prevents less from exceeding this.
Type: Integer
Default: null
Set the parser's optimization level. The lower the number, the less nodes it will create in the tree. This could matter for debugging, or if you want to access the individual nodes in the tree.
Type: Boolean
Default: false
Force evaluation of imports.
Type: Boolean
Default: false
When enabled, math is required to be in parenthesis.
Type: Boolean
Default: false
When enabled, less will validate the units used (e.g. 4px/2px = 2, not 2px and 4em/2px throws an error).
Type: Boolean
Default: false
Read @import'ed files synchronously from disk.
Type: String
Default: false
Configures -sass-debug-info support.
Accepts following values: comments, mediaquery, all.
Type: Boolean
Default: false
Rewrite urls to be relative. false: do not modify urls.
Type: Object
Default: none
Define custom functions to be available within your LESS stylesheets. The function's name must be lowercase and return a primitive type (not an object or array). In the function definition, the first argument is the less object, and subsequent arguments are from the less function call. Values passed to the function are not simple primitive types, rather types defined within less. See the LESS documentation for more information on the available types.
Choices: false 'min' 'gzip'
Default: false
Either do not report anything, report only minification result, or report minification and gzip results. This is useful to see exactly how well Less is performing, but using 'gzip' can add 5-10x runtime task execution.
Example ouput using 'gzip':
Original: 198444 bytes.
Minified: 101615 bytes.
Gzipped: 20084 bytes.
Type: Boolean
Default: false
Enable source maps.
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
This file was generated on Tue Oct 22 2013 21:13:27.
FAQs
Compile LESS files to CSS
The npm package grunt-contrib-less receives a total of 103,023 weekly downloads. As such, grunt-contrib-less popularity was classified as popular.
We found that grunt-contrib-less demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.