首页 > 代码库 > 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