VS2015 VNext学习系列之五：Grunt篇

首页 > 代码库 > VS2015 VNext学习系列之五：Grunt篇

VS2015 VNext学习系列之五：Grunt篇

2024-08-08 12:18:04 216人阅读

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"，并安装：

安装成功后，会出现：

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=0x409module.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");};