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
意义:标记,编译之后文件顶部标记
Grunt--Less的更多相关文章
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- grunt配置任务
这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...
- 快速开发Grunt插件----压缩js模板
前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...
- 是时候搁置Grunt,耍一耍gulp了
也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...
- 应用Grunt自动化地优化你的项目前端
在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...
- Grunt(页面静态引入的文件地址的改变探究)-V2.0
相关插件的引用: grunt-usemin 对页面的操作 grunt-contrib-cssmin 压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...
- Grunt基本使用-V1.0
浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...
- nodejs、npm、grunt——名词解释
最近着手开发一个新项目,打算从工程化的角度整理一套自己的前端开发.发布体系. grunt这些工具,之前别人用我也用,并没有认真想过它们的前世今生,正好趁着这个机会,我来理一理目前业界比较流行这些工具的 ...
- grunt自定义任务——合并压缩css和js
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...
- Grunt学习使用
原文地址:Grunt学习使用必看 grunt简介神马的不多说,到处一大堆. 我只说说我已经实现了的代码. 按照官方的教程 相信已经配置好了,接下来说 package.json 和 Gruntfile. ...
随机推荐
- Java编程的逻辑 (41) - 剖析HashSet
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...
- input 数字输入控制(含小数)
1,可以在keypress里验证输入的字符的合法性. // 数字控件的入力控制 $("input.comma,input.comma1,input.comma2").keypres ...
- 初入android驱动开发之字符设备(四-中断)
上一篇讲到android驱动开发中,应用是怎样去操作底层硬件的整个流程,实现了按键控制led的亮灭.当然,这是一个非常easy的实例,只是略微演变一下,就能够得到广泛的应用. 如开发扫描头,应用透过监 ...
- Shell数组遍历
#!/bin/bash emp_info=( aaa aaa@qq.com bbb bbb@qq.com ccc ccc@qq.com ddd ddd@qq.com eee eee@qq.com ) ...
- bootstrap底部消息提示插件
http://www.bootcss.com/p/messenger/ 具体效果下载插件查看
- [spark] spark 特性、简介、下载
[简介] 官网:http://spark.apache.org/ 推荐学习博客:http://dblab.xmu.edu.cn/blog/spark/ spark是一个采用Scala语言进行开发,更快 ...
- 重点:QObject 的拷贝构造和赋值操作——私有
QObject 中没有提供一个拷贝构造函数和赋值操作符给外界使用,其实拷贝构造和赋值的操作都是已经声明了的,但是它们被使用了Q_DISABLE_COPY () 宏放在了private区域.因此所有继承 ...
- PinnedListView分析二
在PinnedListView分析一中还有一些细节在本文做一个补充,主要是view的绘制: 一个view在真正被绘制都是通过canvas来做,在ViewGroup内的z子view,一般再次此之前,还需 ...
- FPGA中的时序分析(五)
时序约束实例详解 本篇博客结合之前的内容,然后实打实的做一个约束实例,通过本实例读者应该会实用timequest去分析相关的实例.本实例以VGA实验为基础,介绍如何去做时序约束. 首先VGA这种情况属 ...
- selenium+java+chrome环境搭建
我只能说因为版本冲突,简直太折腾了,而搜了无数个博友的帖子才找到正确条案,就不能好好的写篇文章吗? 最近真的是太闲太闲了,平时没事总得搞点技术,不然心里感觉好空虚, 最近看上了selenium,所以试 ...