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. ...
随机推荐
- sbt使用详解
sbt使用详解 安装: 我的系统为centos6.5故采用官方提供的在线安装: curl https://bintray.com/sbt/rpm/rpm > bintray-sbt-rpm.re ...
- 云服务器启动tomcat巨慢,很慢
增加随机数生成熵池 0.查看熵池 cat /proc/sys/kernel/random/entropy_avail 1. yum install rng-tools 2. systemctl sta ...
- springboot项目访问不到controller方法。
访问不到方法首先要从你的controller能否被扫描到出发, 图中显示创建springboot项目自带的这两个的文件要注意把他俩拿出来放到父包下面也就是图中这个位置.如果你的这两个文件在子包里或者说 ...
- Mybatis if标签判断大小
1.if标签语法 <select...> SQL语句1 <if test="条件表达式"> SQL语句2 </if> </select&g ...
- 解决:According to TLD or attribute directive in tag file, attribute value does not accept any express。
http://blog.csdn.net/lzblog/article/details/22076893 ——————————————————————————————————————————————— ...
- Java设计模式(17)解释器模式(Interpreter模式)
Interpreter定义:定义语言的文法,并且建立一个解释器来解释该语言中的句子. Interpreter似乎使用面不是很广,它描述了一个语言解释器是如何构成的,在实际应用中,我们可能很少去构造一个 ...
- 定义与声明、头文件与extern总结
用#include可以包含其他头文件中变量.函数的声明,为什么还要extern关键字? 如果我想引用一个全局变量或函数a,我只要直接在源文件中包含#include<xxx.h> (xxx ...
- 数据表记录包含表索引和数值,请对表索引相同的记录进行合并,即将相同索引的数值进行求和运算,输出按照key值升序进行输出。
题目描述 数据表记录包含表索引和数值,请对表索引相同的记录进行合并,即将相同索引的数值进行求和运算,输出按照key值升序进行输出. 输入描述: 先输入键值对的个数然后输入成对的index和value值 ...
- 【转】Android开发,按手机上的back键时程序最小化而不退出
@Override public boolean dispatchKeyEvent(KeyEvent event) { // menuUtils.createTwoDispatcher(event); ...
- android地址位置
有精度纬度确定地理位置 latitude: 23.1352888---longitude: 113.3297445 调用Google API接口: URL: http://maps.google.cn ...