本文主要讲如何使用Grunt实现less文件压缩。

一 说明

less是非常常用的样式框架之一,Grunt也提供了可以编译和打包less样式文件的插件:grunt-contrib-less。

实现原理分析:

分析该插件源码,可以发现该插件实际只做了对样式文件的各种处理,真正进行编译less文件到css文件,实际还是调用的less库的less.render方法实现的。

如下是grunt-contrib-less库源码:

二 安装

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

三 加载任务

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

四 配置

该插件配置吧比较简单,下边只列出作者用到的几个常用属性:

4.1 files

设置要处理的less文件地址和输出的css文件地址。

 files: {
'dist/build.css': 'theme/build.less'
}

4.2 options

其它各种配置都在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

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

五 实战

下边是一个实例项目。

5.1 整体项目目录:

5.2 gruntfile.js文件中配置:

 module.exports = function(grunt) {
grunt.initConfig({
// 清理空文件夹
clean: {
foo1: {
src: ['dist/*']
}
},
less: {
css: {
options: {
compress: true,
strictMath: true
},
files: {
'dist/build.css': 'theme/build.less'
}
}
} }); grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-clean'); // 默认被执行的任务列表。
grunt.registerTask('default', [
'clean',
'less'
]); };

5.3 入口文件build.less代码很简单:

@import "a.less";

5.4 核心less文件a.less代码如下:

 @width: 80px;
@color: 'red'; .a-title {
color: @color;
width: @width;
height: 100px;
background-color: blueviolet;
}

5.5 执行grunt命令后输出文件build.css如下(下边是格式化后的):

 .a-title {
color: 'red';
width: 80px;
height: 100px;
background-color: blueviolet
}

六 实战代码下载地址

上边实战源码获取地址:

https://gitee.com/bangbangwa/grunt/blob/master/grunt-contrib-less-test.rar

参考资料&内容来源

Grunt官网:https://www.npmjs.com/package/grunt-contrib-less

博客园:https://www.cnblogs.com/xiyangbaixue/p/4132901.html

Grunt学习笔记【7】---- grunt-contrib-less插件详解的更多相关文章

  1. Grunt学习笔记【8】---- grunt-angular-templates插件详解

    本文主要讲如何用Grunt打包AngularJS的模板HTML. 一 说明 AngularJS中使用单独HTML模板文件的地方非常多,例如:自定义指令.ng-include.templateUrl等. ...

  2. Grunt学习笔记【6】---- grunt-contrib-requirejs插件详解

    本文主要讲如何使用Grunt实现RequireJS文件压缩. 一 说明 ES6出来前,RequireJS是JavaScript模块化最常用的方式之一.对于使用RequireJS构建的项目,要实现打包压 ...

  3. Linux防火墙iptables学习笔记(三)iptables命令详解和举例[转载]

     Linux防火墙iptables学习笔记(三)iptables命令详解和举例 2008-10-16 23:45:46 转载 网上看到这个配置讲解得还比较易懂,就转过来了,大家一起看下,希望对您工作能 ...

  4. (转)live555学习笔记10-h264 RTP传输详解(2)

    参考: 1,live555学习笔记10-h264 RTP传输详解(2) http://blog.csdn.net/niu_gao/article/details/6936108 2,H264 sps ...

  5. SNMP学习笔记之SNMP 原理与实战详解

    原文地址:http://freeloda.blog.51cto.com/2033581/1306743 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法 ...

  6. Django学习笔记之Django Form表单详解

    知识预览 构建一个表单 在Django 中构建一个表单 Django Form 类详解 使用表单模板 回到顶部 构建一个表单 假设你想在你的网站上创建一个简单的表单,以获得用户的名字.你需要类似这样的 ...

  7. JQuery学习笔记系列(一)----选择器详解

    笔者好长时间没有更新过博客园的笔记了,一部分原因是去年刚刚开始工作一段时间忙碌的加班,体会了一种每天加班到凌晨的充实感,之后闲暇时间了也因为自己懒惰没有坚持记笔记的习惯,现在重新拾起来. 借用古人的一 ...

  8. SharpDevelop学习笔记(5)—— AddIns系统详解

    在所有的插件被加载到指定的扩展点后,插件树就被创建完毕了, 但是,我们知道,插件树创建后,每个插件在插件树的位置在就固定的,但是,如果某些情况下,我们希望一些插件不可使用或应该隐藏起来, 或者说有的插 ...

  9. Hibernate学习笔记二:Hibernate缓存策略详解

    一:为什么使用Hibernate缓存: Hibernate是一个持久层框架,经常访问物理数据库. 为了降低应用程序访问物理数据库的频次,从而提高应用程序的性能. 缓存内的数据是对物理数据源的复制,应用 ...

随机推荐

  1. SQLite中特殊的INSERT语句

    SQLite中特殊的INSERT语句   在SQLite中,INSERT是基本语句,用来向表中插入数据.但是当表中存在字段存在唯一.非空.检查.主键等约束时,插入的数据很容易和约束冲突,造成插入操作失 ...

  2. JSP高级功能-java之JSP学习第三天(非原创)

    文章大纲 一.JSP 标准标签库(JSTL)二.JSP 连接数据库三.JSP XML 数据处理四.JSP JavaBean五.JSP 自定义标签六.JSP 表达式语言七.JSP 异常处理八.JSP 调 ...

  3. BZOJ 4543 2016北京集训测试赛(二)Problem B: thr 既 长链剖分学习笔记

    Solution 这题的解法很妙啊... 考虑这三个点可能的形态: 令它们的重心为距离到这三个点都相同的节点, 则其中两个点分别在重心的两棵子树中, 且到重心的距离相等; 第三个点可能在重心的一棵不同 ...

  4. 查看tomcat启动文件都干点啥---Bootstrap.java

    在上一章查看tomcat启动文件都干点啥---catalina.bat,说了在catalina.bat中都走了什么流程,最重要的是,我们得出了如下这段命令: _EXECJAVA=start " ...

  5. 苹果放宽了 iOS 5.0 对应用本地存储的限制

    iOS5.0引入了iCloud,让那些需要本地存储较多数据的app开发者(比如支持离线的杂志,新闻类app)陷入了 尴尬的境地,因为将大量数据存储在/Documents 文件夹将导致iCloud同步变 ...

  6. 危急,不要任意让站点记住password自己主动登陆!

    为了方便用户登录,差点儿全部的站点都实现了"记住password"."自己主动登陆"这样似乎人性化的功能. 我也非常喜欢这个功能,由于我自己的脑子实在是讨厌记东 ...

  7. 我用select做多路复用踩到的坑

    既然说是用select踩到的坑,那么就先直接贴一段使用select的代码上来瞅一下: bool SocketAction(int fd, const char* buf, size_t len, ui ...

  8. mysql莫名的主键重复

    REPAIR TABLE t_car_type; OPTIMIZE TABLE t_car_type; 可解决问题

  9. srm 541

    资瓷点这里阅读该文章O_o 250 Solution 水题,最暴力的方法枚举就可以 Code #include <bits/stdc++.h> using namespace std; # ...

  10. 美柚“姨妈假”上头条,App事件营销怎么做

        近期,微博上有关"姨妈假"的话题异常火爆,事件源于厦门互联网企业美柚所推出的一项"奇葩福利"------女员工可向公司请姨妈假.此事经媒体报道.微博爆料 ...