Using Grunt, Bower and NPM in Visual Studio 2013

What do you do in Visual Studio 2013, which provides built-in support for Grunt and Gulp in Visual Studio 2015? Microsoft has released the features in 2015 as a few separate extensions that you can use in Visual Studio 2013.

In fact, you need three extensions.

1. Installation

First, you need Visual Studio 2013.3, which is to say, the third update package for Visual Studio is installed.

1. Task Runner Explorer

Visual Task Manager for Grunt.

extension Address:https://visualstudiogallery.msdn.microsoft.com/8e1b4368-4afb-467a-bc13-9650572db708

2. Package Intellisense

Smart tips by searching for online NPM and Bower packages.

Extension Address: https://visualstudiogallery.msdn.microsoft.com/65748cdb-4087-497e-a394-2e3449c8e61e

3. Grunt Launcher

Optional, provided in the Solution Manager right-click menu contains "NPM install", in the Package.json right-click menu support, before running the GRUNT/GULP task to execute "NPM install."

Extension Address: HTTPS://VISUALSTUDIOGALLERY.MSDN.MICROSOFT.COM/DCBC5325-79EF-4B72-960E-0A51EE33A0FF

2. Use

Right-click on the gruntfile.js file to bring up a menu of administrative tasks.

By default, the Task Runner Explorer appears below Visual Studio.

It can also be triggered by one of the 4 events in Visual Studio.

Double-click the task to execute it.

You can provide smart reminders when you edit the Package.json file for NPM.

Include package version

Hover the reminder.

Demo.

Resources

Intruducing Gulp, Grunt, Bower, and NPM support for Visual Studio

Using Grunt, Bower, and NPM in Visual Studio 2013