Configure Grunt in Visual Studio 2015

Configure Grunt in Visual Studio 2015

You can easily configure Grunt to perform client-side build tasks in Visual Studio 2015. Grunt is very similar to Gulp, and either one can be used with Visual Studio 2015 to perform a variety of tasks. Although it’s supported, you need to add it to the project as a dependency before you can start working with Grunt. In this example, we are going to configure Grunt to process files and place them where we want them in the project’s wwwroot folder.

First, we need to make sure Grunt is installed locally for the project. This is accomplished using NPM, which is similar to Bower but requires a different configuration file, “package.json”. Add a new NPM configuration file to the root of the project, called package.json. Add the “grunt” and “grunt-bower-task” items to the devDependencies property, as shown (you should get Intellisense as you type their names):

Save your changes. You should see a new NPM folder in your project, under Dependencies, and it should include the grunt and grunt-bower-task items.

Next, add a new Grunt Configuration file (Gruntfile.js) to the root of the project. The default version of this file includes an empty call to grunt.initConfig. We need to configure grunt to use bower, and then register tasks associated with this configuration. Modify the Gruntfile.js to match this file:

Now that we’ve finished setting things up, we’re ready to let these tools manage our static files and client-side dependencies for us. Right click on gruntfile.js in your project, and select Task Runner Explorer. Double-click on the bower task to run it.

The output should show that the process completed without errors, and you should see that it copied some packages to the \wwwroot\lib folder. Open the wwwroot\lib folder in project explorer, and you should find that the client-side dependencies (bootstrap, jquery, etc.) have all been copied into this folder.

That’s all that’s required to quickly get grunt set up and working in Visual Studio 2015.

  • BenCollard

    Nice article but I’m askink myself about the use of Grunt.. What is the goal of tasks ?

    • ardalis

      Depends on the task. It’s a task runner, so it can do pretty much anything. Some common tasks are deleting and copying files, merging files together, minifying them, compiling LESS or SASS into CSS, etc.

      • BenCollard

        Ok ! Could be pretty cool to have taks to do so while deploying etc. 🙂 Thx

  • Scott Addie

    Which task runner will be the default in VS 2015’s ASP.NET template: Grunt or Gulp?

    • ardalis

      Gulp.

  • jltrem

    Thank you for this. I’m not able to publish though. Looks like project.json has a bit of gulp left in the scripts.prepare “gulp copy”. What would be the grunt equivalent?

    • ardalis

      This article is going to be updated soon and split into two, but for now does it help answer your question? It covers a fairly detailed grunt example.

      http://docs.asp.net/en/latest/client-side/grunt-gulp.html

      • jltrem

        No mention of project.json on that page and the project.json page is yet-to-be-written. I changed the “gulp copy” to “grunt bower:install”. It seems to be working.

  • Diego Mesa

    Hello, I created a new Asp.net web app 4.5.2, I added the package.json, but I cannot see the dependencies folder? Any idea?

    • Diego Mesa

      Ups! I found the answer, it’s only for ASP.net 5 projects

  • Felix Rabinovich

    Hi, I have more experience with Grunt and it somehow feels more intuitive to me. However, as we are starting new ASP.NET 5 project, I am asking myself, whether I am going to fight Microsoft defaults every step of the way if I choose Grunt over Gulp. Any thoughts?

    • ardalis

      I tend to agree with you – I would choose Gulp just to avoid friction with Microsoft’s defaults unless there was a compelling reason to use Grunt.

  • Hi Steve, Where would you deploy those js/css/html files in a WebApi ASP.NET 4.5 project? and to have them deployed as part of your CI process? at the moment I’m manually coping my ‘dist’ folder to the root of the WebAPI project after deploying the app. Thanks