Introducing Gulp, Grunt, Bower, and npm support for Visual Studio

Web Development, specifically front end web development, is fast becoming as complex and sophisticated as traditional back end development. Most projects don't just upload some JS and CSS files via FTP. There's now a front end build process that can include expansion of SASS and LESS, minification of CSS/JS, running JSHint or JSLint, and much more. These build tasks and processes are coordinated with tools like Gulp and Grunt. Additionally, client-side libraries are managed as packages using management systems like npm and bower.

Why client-side package managers for ASP.NET? Why not NuGet? Why not MSBuild?

Some of you may ask, why not use NuGet for JavaScript? Why not extend MSBuild for building CSS/JS? Simple. Because there's already a rich ecosystem for this kind of thing. NuGet is great for server side libraries (and some client-side) but there are so many more CSS and JS libs on npm and bower. MSBuild is great for server-side builds but can be overkill when building a client-side app.
So, use both. These are tools in your toolkit. Adding support for Gulp, Grunt, Bower, npm (and other stuff, in the future if needed) means a more familiar environment for front-end devs doing ASP.NET and it opens the doors for ASP.NET devs to bring in the JS and CSS libraries communities use every day.

Introducing Task Runner Explorer

We’ve received a ton of feature requests regarding Grunt/Gulp support from many of you as well as the community at large. We are building first-class support for both Grunt and Gulp in Visual Studio “14” with full extensibility. Now we’re ready to ship a preview of this support as an extension to VS2013 and would appreciate your help testing and exploring this feature. 
Today we're introducing a preview of the "Task Runner Explorer" as a VSIX extension. We're also recommending two other VSIXs to round out the experience for this feature.

NOTE: Much of the functionality included in these multiple VSIX extensions will be built into Visual Studio so you won't need to install so many things. However, for VS2013 and this preview we needed multiple VSIXs in order to get you the bits sooner than later. Also note that today only Task Runner Explorer will work on Visual Studio Express but for VS14 all  the features will work in the free VS Express version.

Consider these features as a "DevLabs" preview for now, much like the VS Productivity Power Tools. They'll graduate into the final product.

What do you need?

First, you'll need Visual Studio 2013.3 - that 3 means "Update 3" which is a free update.

1. TRX - Task Runner Explorer Visual Studio Extension
2. NPM/NBower Package Intellisense - Search for online NPM and Bower packages directly with Intellisense
3. Optional Grunt Launcher (gives right-click options in Solution Explorer - including "npm install")
   • Without this extension, for now you'll need to run npm install yourself to restore/add packages.
   • If you DO have this extension, right click on packages.json and "npm install" before running a grunt/gulp task.

To open the TRX (Task Runner Explorer), simply right-click any gruntfile.js in your project:

The TRX sits at the bottom of VS by default and looks like this:
 
Here we can see that it found a gruntfile.js in the root of one or more projects in the solution. It also shows the task bindings feature that allows any task or target to be triggered by 4 different Visual Studio events.
To associate a task/target with a VS event, just right-click and setup bindings.

To run any task/target, just double-click it and a console appears:

When you've got the Package Intellisense Extension you'll find it easy to add and update packages when directly editing your package.json for both bower and npm.

You'll even get metadata tooltips populated asynchronously.

As you go testing it, remember you'll need to run "npm install" before you use the Task Runner Explorer to run Grunt tasks.

Published By
S.G.Godwin Dinesh.MCA
Sr.System Administrator