• 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

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

  • 相关阅读:
    MySql——编程
    MySql——事务控制语言(DTL)
    wamp-php 集成环境的基础配置
    用户的 添加 权限 MySql远程登录
    使用模拟器调试移动端
    new关键字对构造函数做了什么
    H5与Native交互之JSBridge技术
    拍照上传头像图像旋转的问题
    Vue实现用户自定义上传头像裁剪
    H5图片压缩上传
  • 原文地址:https://www.cnblogs.com/koleyang/p/5579556.html
Copyright © 2020-2023  润新知