[Translation] Introduction to Gulp, Grunt, Bower, and npm support in Visual Studio

Introduction

Web development, namely, front-end development is becoming, like traditional back-end development, more and more complex. Many projects need more than a simple download of a pair of JS and CSS files via FTP. Now we can observe the so-called front-end build process , which may include compiling SASS and LESS, compressing CSS / JS, running JSHint or JSLint, and more. These assembly tasks and processes are coordinated by tools like Gulp or Grunt. Client libraries can also be managed using various package management systems like npm or bower.

What are ASP.NET package management client systems for? Why not NuGet? Why not MSBuild?

Some of you wonder - “why not use JavaScript with NuGet?” . Or, for example, “why not write another MSBuild extension to build CSS / JS?” .
')
It's simple. Because there is already a rich ecosystem sharpened by such tasks. NuGet is good for server libraries (well, sometimes it can be useful for client libraries), but there is a hell of more CSS and JS libraries for npm and bower adapted for this business. MSBuild is good for server-side builds, but it can be a big overkill to build client applications.

Well, how about using both solutions. For this there are provided tools. Adding support for Gulp, Grunt, Bower and npm (well, and other buns, if needed in the future) means a more adapted environment for front-end developers working with ASP.NET. And it also opens the door for ASP.NET developers in knowing and using the JS and CSS libraries that are used daily by the front-end community.

Introduction to Task Runner (Task Runner Explorer)

We received a ton of requests for support of Grunt / Gulp from many of you and also from the community as a whole. We are working on high-quality support from both Grunt and Gulp managers in Visual Studio "14", with full extensibility. Now we are ready to present to your attention the preliminary version, the above described support, in the form of an extension for VS2013 and we will be happy if you help us, getting to know and testing this extension.

Today we present a pre-trial version of our Task Launcher in the form of a VSIX extension. We also recommend you two other VSIX extensions for more convenient use, the functionality we have introduced.

Note :

Most of the functionality included in these several VSIX extensions will be included in Visual Studio, so you will not have to install all of them in the future. All the same, for this pre-trial version for VS2013, we need all these extensions in order to present our solution to you in a short time. Also note that at the moment only Task Runner Explorer will work in Visual Studio Express , but starting from VS14 all the functionality will work in the free version of Visual Studio.

Consider the above-rearranged feature set as a preliminary, DevLabs version rather than something final and complete solution from the VS Productivity Power Tools section. All this will be achieved in the final version of the product.

What you need?

To get started, get Visual Studio 2013.3 - where .3 means Update number 3 , this update is free.

1. TRX extension for Visual Studio Express
2. Supporting NPM / NBower expansion - namely, package search and autocomplete
3. Optional Gulp Launcher extension - add npm install to the context menu of the project tree
   
   
   • Without this extension, the installation and removal of npm packages must be performed externally.
   • If you still installed this extension, you will need to right-click on packages.json and click on npm install before running the grunt / gulp tasks.
   
   
   

In order to open the TRX (Task Runner Explorer), simply right-click on the gruntfile.js file in your project:



TRX is usually located on the bottom panel in VS and looks like this:



Here you can see that gruntfile.js was found at the root of one or more projects in the solution. It also displays the functionality that allows you to run tasks in response to 4 different Visual Studio events.

To associate a goal or task with a Visual Studio event, simply click the right mouse button and perform the binding:


To launch a goal or task, just click on the last one and the following terminal will appear to you:



After installing the autocomplete extension for the package manager, you will notice how easy it is to add or update a particular package when editing your package.json for bower or npm.



You can also see asynchronous tooltips filled with metadata.



When you start testing, remember that you need to run npm install before using TRX to run Grunt tasks.

A few words from the translator

Thank you all for your attention, this is my first translation so I will be glad for constructive comments.
Here is the link to the original.