VS2015 VNext学习系列之五：Grunt篇

时间：2014-12-17 18:22:27 阅读：614 评论：0 收藏：0 [点我收藏+]

标签：style blog http ar io color os sp for

1.概述

Grunt：基于 JS 的task runners。它是一个应用程序，能自动化地开发一些任务。

2.添加less

在“WebAppBowerGrunt”项目根目录下，新建"Lesses"文件夹，在其内，添加site.less文件，其代码为：

@bgcolor: red;

body {
    background-color: @bgcolor;
}

3.修改package.json

添加："grunt-contrib-less": "^0.12.0"，并安装：

bubuko.com,布布扣

安装成功后，会出现：

bubuko.com,布布扣

4.修改gruntfile.js

其代码修改后：

// This file in the main entry point for defining grunt tasks and using grunt plugins.
// Click here to learn more. http://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/lib",
                    layout: "byComponent",
                    cleanTargetDir: false
                }
            }
        },
        // Add this JSON object:
        less: {
            development: {
                options: {
                    paths: ["Lesses"],
                },
                files: { "wwwroot/css/site.css": "Lesses/site.less" }
            },
        }
    });

    // 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");
};