How to do it...

We can use Grunt in two ways:

Without using Visual Studio, through the command line, using Command Prompt, Node.js, npm, and installing and using all the modules you need to execute all the tasks we want to run.

Installing Visual Studio 2015 Community Edition and the Visual Studio extensions that allow us to run these tasks in the Visual Studio user interface.

In this recipe, we will use Grunt in the second of these two ways, using Visual Studio to compile LESS files to CSS files:

1. To install Grunt, let's open package.json, or if we begin from an empty project, just add a package.json file.
2. Let's type grunt in the devDependencies section. IntelliSense will help us to find the Grunt package:

1. After that, we type the version. IntelliSense will also help us to find the right Grunt version among all of the available versions. The grunt package will be downloaded automatically:

Select the version of the package you wish to use.

1. We can also observe the new npm folder inside Dependencies, which contains the new Node module just installed, as well as all of its dependencies:

1. Let's create a .less file named site.less, selecting File | New item in the wwwroot/css folder:

1. Let's add two grunt packages:
   • grunt-contrib-less to compile .less files to .css files.
   • grunt-contrib-watch to automate this task, watching the modifications being made to a .less file in real time:

1. Let's create the Gruntfile.js by right-clicking on the application and choosing Add | New Item | DNX | client-side:

1. Let's add the following line of code to the initConfig method:

pkg: grunt.file.readJSON('package.json')

1. Let's create the less task, which will compile a .less file into a .css file.
2. We add the following code after grunt.config to be sure that our task uses the correct plugin:

grunt.loadNpmTasks('grunt-contrib-less');

1. We will then add the following code to register this task as the default grunt task:

grunt.registerTask('default', ['less']);

Let's refresh the gruntfile.js:

1. After refreshing the gruntfile.js, we can see the .less task just created:

1. Let's now run the task by right-clicking on the name of the task in Task Runner Explorer:

We can see the command line that is generated by Visual Studio:

Now we can also see that the .css file is generated:

We can see the .css code has been generated as well: