Grunt--less

Summary:

The Automatic build tool grunt, which has a module "Grunt-contrib-less", is described below, and the following is a configuration grunt automatically compiling less files.

Installation:

Grunt is based on node, functional modularity. You can configure the grunt-contrib-less in Package.json and then NPM install to complete the installation, or you can install it by following command

NPM Install grunt-contrib-less--save-dev

Note: Grunt-contrib-less is a development-dependent package, so it is installed into devdependencies.

Configuration tasks:

Here's a simple example.

Less: {  //Development environment  development: {    options: {      paths: ["assets/css"]  //@import The path of the loaded file    },    Files: {      "path/to/result.css": "Path/to/source.less"  //compiles path/to/source.less to Path/to/result.css    }  },//  online environment  production: {    options: {      paths: ["Assets/css"],  //@import The path      to the loaded file Cleancss:true,     //compress CSS file      modifyvars: {   //redefine global variable        imgpath: ' "http://mycdn.com/path/to/images "',        bgColor: ' Red '      }    ,    files: {      " path/to/result.css ":" Path/to/source.less "    }  }}

Load module:

Load the less module from Node_module, as follows:

Grunt.loadnpmtasks (' grunt-contrib-less ');

Defining tasks

Development environment
Grunt.registertask (' Lessdev ', [' less:development ']);
On-line environment
Grunt.registertask (' Lesspro ', [' less:production ']);

To perform a task:

Execute grunt Lessdev or grunt Lesspro in the command window.

Complete as follows:

Gruntfile.js:

Module.exports =function(grunt) {' Use strict '; Grunt.initconfig ({less: {//Development Environmentdevelopment: {options: {paths: ["Assets/css"]//@import the path to the loaded file}, files: {"Path/to/result.css": "Path/to/source.less"//compile path/to/source.less as Path/to/result.css            }          },          //on-line environmentproduction: {options: {paths: ["Assets/css"],//@import the path to the loaded fileCLEANCSS:true,//Compress CSS FilesModifyvars: {//Redefine global VariablesImgpath: ' Http://mycdn.com/path/to/images ', BgColor:' Red '}}, files: {"Path/to/result.css": "Path/to/source.less"            }          }        }    }); Grunt.loadnpmtasks (' Grunt-contrib-less '); //Development EnvironmentGrunt.registertask (' Lessdev ', [' less:development ']); //on-line environmentGrunt.registertask (' Lesspro ', [' less:production ']); };

The options parameters are detailed:

Paths

Type: String Array Function


Default value: Root directory.

Meaning: Defines the path to the @import load file. The default value is the current path of the file. If you specify a function, the source file path will be the first parameter. You can return to an array that uses a string or path.

RootPath:

Type: String

Default value: ""

Meaning: All files are based on this path

Compress

Type: BOOL

Default value: False

Meaning: Compress the compiled CSS file, that is, delete blank lines and spaces in the CSS file

CLEANCSS:

Type: BOOL

Default value: False

Meaning: Use clean-css to compress CSS files

Cleancssoptions:

Type: Object

Default value: None

Meaning: If you set Cleancss to True, this item only works, configuring CLEANCSS options

Iecompat:

Type: BOOL

Default value: True

Meaning: The compiled CSS file adapts to IE8

Optimization:

Type: Integer

Default value: null

Meaning: Set the optimization level, the smaller the number, the fewer nodes are created in the tree. Will affect the Debug.

Strictimports:

Type: BOOL

Default value: False

Meaning: If set to True,less, the @import referenced file will be loaded in standard mode

Strictmath:

Type: BOOL

Default value: False

Meaning: If set to true, the expression needs to be enclosed in parentheses.

Strictunits:

Type: BOOL

Default value: False

Meaning: If set to True,less will verify that the unit is legal

Syncimport:

Type: BOOL

Default value: False

Meaning: Asynchronously loading a file referenced by @import

Dumplinenumbers:

Type: string (comments, Mediaquery,all)

Default value: False

Significance:

Relativeurls:

Type: BOOL

Default value: False

Meaning: Rewrite URL as relative URL

Customfunctions:

Type: Object

Default value: None

Meaning: A custom function, generally a global function.

Report

Type: String (' min ', ' gzip ')

Default value: Min

Meaning: What is the way to compress files, gzip more time consuming

Sourcemap:

Type: BOOL

Default value: False

Meaning: Whether to use file mapping

Sourcemapfilename:

Type: string

Default value: None

Meaning: Write the source mapped to a separate file with the given file name.

Sourcemapurl:

Type: string

Default value: None

Meaning: Rewrite the source mapping in the CSS file.

Sourcemapbasepath:

Type: string

Default value: None

Meaning: Sets the base path of the less file path in the source map.

Sourcemaprootpath:

Type: string

Default value: None

Meaning: The less file root directory in the map file

Outputsourcefiles:

Type: BOOL

Default value: False

Meaning: Place the less file in the map file, replacing the reference.

Modifyvars:

Type: Object

Default value: None

Meaning: overriding global variables

Banner

Type: string

Default value: None

Meaning: Tag, post-compilation file top tag

Grunt--less