Grunt构建工具插件篇——之less工具

Grunt--Less

摘要：

　　之前介绍了自动构建工具Grunt，其中有一个模块是"grunt-contrib-less"，下面是配置Grunt自动编译less文件。

安装：

　　Grunt是基于node，功能模块化。你可以将grunt-contrib-less配置在package.json中然后npm install就完成安装了，也可以通过下面命令安装

npm install grunt-contrib-less --save-dev

注意： grunt-contrib-less是开发依赖包，所以安装到devDependencies中。

配置任务：

下面是一个简单的例子

less: {  // 开发环境  development: {    options: {      paths: ["assets/css"]  // @import 加载文件的路径    },    files: {      "path/to/result.css": "path/to/source.less"  // 将path/to/source.less编译为path/to/result.css    }  },  // 线上环境  production: {    options: {      paths: ["assets/css"],  // @import 加载文件的路径      cleancss: true,     // 压缩css文件      modifyVars: {   // 重新定义全局变量        imgPath: '"http://mycdn.com/path/to/images"',        bgColor: 'red'      }    },    files: {      "path/to/result.css": "path/to/source.less"    }  }}

加载模块：

　　从node_module中加载less模块，如下：

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

定义任务

// 开发环境
grunt.registerTask('lessDev', ['less:development']);
// 线上环境
grunt.registerTask('lessPro', ['less:production']);

执行任务：

　　在命令窗口中执行 grunt lessDev或者grunt lessPro。

完整如下：

Gruntfile.js：

module.exports = function (grunt) {    'use strict';    grunt.initConfig({        less: {          // 开发环境          development: {            options: {              paths: ["assets/css"]  // @import 加载文件的路径            },            files: {              "path/to/result.css": "path/to/source.less"  // 将path/to/source.less编译为path/to/result.css            }          },          // 线上环境          production: {            options: {              paths: ["assets/css"],  // @import 加载文件的路径              cleancss: true,     // 压缩css文件              modifyVars: {   // 重新定义全局变量                imgPath: '"http://mycdn.com/path/to/images"',                bgColor: 'red'              }            },            files: {              "path/to/result.css": "path/to/source.less"            }          }        }    });    grunt.loadNpmTasks('grunt-contrib-less');    // 开发环境    grunt.registerTask('lessDev', ['less:development']);    // 线上环境    grunt.registerTask('lessPro', ['less:production']);    };

options参数详解：

paths：

　　类型： String Array Function


　　默认值: 根目录.

　　意义：定义@import加载文件的路径。默认值是文件的当前路径。 如果指定一个函数的源文件路径将是第一个参数。您可以返回到使用字符串或路径的数组。

rootpath：

　　类型：String

　　默认值：“”

　　意义：所有文件都是基于这个路径

compress：

　　类型：bool

　　默认值：false

　　意义：压缩编译之后的css文件，即删除css文件中的空行和空格

cleancss：

　　类型： bool

　　默认值： false

　　意义： 使用clean-css来压缩css文件

cleancssOptions：

　　类型： Object

　　默认值： none

　　意义：如果设置cleancss为true的话，此项才起效果，配置cleancss的选项

ieCompat：

　　类型：bool

　　默认值：true

　　意义：编译之后的css文件适应于ie8

optimization：

　　类型： Integer

　　默认值：null

　　意义：设置优化等级，数字越小，在树中创建的节点越少。会影响到调试。

strictImports：

　　类型：bool

　　默认值：false

　　意义：如果设置为true，less将会以标准的模式来加载@import引用的文件

strictMath：

　　类型：bool

　　默认值：false

　　意义：如果设置为true，表达式需要用括号括起来

strictUnits：

　　类型：bool

　　默认值：false

　　意义：如果设置为true，less将会验证单位是否合法

syncImport：

　　类型：bool

　　默认值：false

　　意义：异步加载通过@import引用的文件

dumpLineNumbers：

　　类型：string(comments, mediaquery,all)

　　默认值：false

　　意义：

relativeUrls：

　　类型：bool

　　默认值：false

　　意义：重写url为相对url

customFunctions：

　　类型： Object

　　默认值: none

　　意义：自定义函数，一般是全局功能的。

report：

　　类型： string ('min', 'gzip')

　　默认值：min

　　意义：何种方式来压缩文件，gzip更消耗时间

sourceMap：

　　类型：bool

　　默认值：false

　　意义：是否使用文件映射

sourceMapFilename：

　　类型：string

　　默认值：none

　　意义：编写源与给定的文件名映射到一个单独的文件。

sourceMapUrl：

　　类型：string

　　默认值：none

　　意义：重写css文件中的源映射。

sourceMapBasepath：

　　类型：string

　　默认值：none

　　意义：设置在源映射中的less文件路径的基本路径。

sourceMapRootpath：

　　类型：string

　　默认值：none

　　意义：在map文件中的less文件根目录

outputSourceFiles：

　　类型：bool

　　默认值：false

　　意义：将less文件放到Map文件中，替换引用。

modifyVars：

　　类型： Object

　　默认值： none

　　意义：重写全局变量

banner：

　　类型：string

　　默认值： none

　　意义：标记，编译之后文件顶部标记