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

时间:2021-03-29 16:05:25

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

  意义:标记,编译之后文件顶部标记