首页 > 代码库 > ASP.NET vNext总结:Grunt
ASP.NET vNext总结:Grunt
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等功能介绍),出去讨饭……
ASP.NET vNext总结:Grunt