VS2015 vnext Study Series of five: Grunt

1. Overview

Grunt: JS-based task runners. It is an application that can automatically develop some tasks.

2. Add less

Under the "Webappbowergrunt" project root directory, create a new "lesses" folder, where you add the site.less file with the code:

@bgcolor: red;body {    background-color: @bgcolor;}

3. Modify Package.json

Add: "Grunt-contrib-less": "^0.12.0", and install:

Once the installation is successful, it will appear:

4. Modify Gruntfile.js

After its code is modified:

//This is 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"], the files: {"Wwwroot/css/site.css":"lesses/site.less" }            },        }    }); //This command registers the default task which would install Bower packages into Wwwroot/libGrunt.registertask ("default", ["Bower:install"]); //The following line loads the grunt plugins. //This line needs to is at the end of this this file.Grunt.loadnpmtasks ("Grunt-bower-task"); Grunt.loadnpmtasks ("grunt-contrib-less");};

5. Open Task Explorer

Right-click Gruntfile.js file:

Note: If the less item does not appear, click Refresh.

Result after run:

To view the generated Site.css file:

This shows the site.less compiled into SITE.CSS success!

6. Summary

About Grunt There are other features, it is very powerful, easy to use. After I study later to add it!

VS2015 vnext Study Series of five: Grunt