首页 > 代码库 > ASP.NET vNext总结：Grunt

ASP.NET vNext总结：Grunt

2024-10-21 22:24:02   226人阅读

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


联系
我们