标签：
1.概述
Grunt同样是基于Javascript（使用NPM)技术的task runners。task runners是一个应用程序，或者说它是一个任务工具。本章继续在前文介绍的项目基础上来演示！
2.编译less
2.1创建less文件
先在"vNext.WebStarterTemplate"项目根目录下创建Lesses文件夹。在其下创建两个less文件：
color.less代码：
//颜色样式定义 @bg-color-red: #ff0000;
site.less代码：
//嵌入color.less样式
@import "color.less";
body {
background-color: @bg-color-red;
}
.test {
width: 100px;
}
2.2安装grunt-less
打开package.json：
然后安装：
成功后，NPM目录会出现：
2.3修改gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
bower: {
//bower下载和安装默认配置
install: {
options: {
targetDir: "wwwroot/lib",
layout: "byComponent",
cleanTargetDir: false
}
}
},
less: {
//开发版（无压缩）
dev: {
files: {
"wwwroot/css/site.css": "Lesses/site.less"
},
options: {
sourceMap: true,
//paths: ["Lesses"]//或指定路径
}
},
//生产版（压缩）
prod: {
files: {
"wwwroot/css/site.min.css": "Lesses/site.less"
},
options: {
cleancss: true,
}
}
}
});
// This command registers the default task which will install bower packages into wwwroot/lib
grunt.registerTask("default", ["bower:install"]);
// The following line loads the grunt plugins.
// This line needs to be at the end of this this file.
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-less");
};
注：关于最新版本的grunt-contrib-less配置，可以参见：https://www.npmjs.com/package/grunt-contrib-less ，其压缩功能需要另安装插件了，我一时没“研究”明白，没测试成功，可能vs暂时集成问题吧。
2.4执行task
右键“gruntfile.js”,打开Explorer后,再分别右键dev和prod后执行Run：
可以看到生成两个css文件大小区别：
这时css目录：
打开site.css其代码已经修改为(和前面定义的less样式一致,但没有缩进压缩)：
body {
background-color: #ff0000;
}
.test {
width: 100px;
}
/*# sourceMappingURL=data:application/json;
base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxlc3Nlcy9zaXRlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSUE7RUFDSSx5QkFBQTs7QUFHSjtFQUNJLFlBQUEifQ== */
再打开site.min.css（去掉空格，注释，换行）
body{background-color:red}.test{width:100px}
未完待续（还有watch等功能介绍），出去讨饭……
标签：
原文地址：http://www.cnblogs.com/givecase/p/4199404.html
