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等功能介绍),出去讨饭……

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。