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. ...
随机推荐
- Python time 的应用
测试如下: import time print("chenfulin") # 返回格林威治西部的夏令时区 print("time.altzone %d" % t ...
- [加密]展讯secureboot方案
Secure Boot方案介绍及实施流程 转自网络 1. Secure boot概述 本文档主要是secure boot方案的介绍和说明,其内容会涵盖以下方面:secure boot的目的和介绍.技术 ...
- Linux系统上传下载命令rz和sz
Linux系统简单易用的上传下载命令rz和sz (2017年7月10日更新) 发布地址(http://oldboy.blog.51cto.com/2561410/588592) (一)安装方法汇总 1 ...
- 在android中使用logback-android日志框架配置 slf4j + logback
为什么使用 slf4j + logback logbak定位于log4j的替代者,logback同样支持slf4j,方便被替换.在Android平台上,我在使用log4中遇到tag混乱的问题.相比lo ...
- 微信公众平台开发 - 动手篇。使用weinxinFundation开始一个微信公众平台的开发
本文主要讲解如何使用 weinxinFundation 进行二次开发. 步骤如下: 1.创建新的web项目. 在eclipse里新建一个dynamicly web project,比如本文叫weixi ...
- Web服务端开发需要考虑的问题(续)
方案汇总API设计应用架构代码库管理工具链工作计划目标预期关键过程service-driver接口定义及实现web样例 方案汇总 API设计 基于https. 只提供纯数据. 基于一开始提出的rest ...
- qt configure参数配置介绍
======================================全文是按照./configure -help来翻译的==================================== ...
- Selenium常用操作汇总二——如何得到弹出窗口
在selenium 1.X里面得到弹出窗口是一件比较麻烦的事,特别是新开窗口没有id.name的时候.当时还整理了处理了几种方法,详见:http://seleniumcn.cn/read.php?ti ...
- GRAPH ATTENTION NETWORKS
基本就是第一层concatenate,第二层不concatenate. 相关论文: Semi-Supervised Classification with Graph Convolutional Ne ...
- 【转】Visual Studio团队资源管理器 Git 源码管理工具简单入门
1.1 环境 Visual Studio + GitLab (其他版本同理) 1.2 Git操作过程图解 1.3 常见名词解释 拉取(Pull):将远程版本库合并到本地版本库,相当于(Fetch+Me ...