Introduction to gulp, grunt, Bower, and NPM support for Visual Studio

[Original article] introducing gulp, grunt, Bower, and NPM support for Visual Studio

Web development, especially front-end web development, is rapidly becoming as complex and sophisticated as traditional back-end development.Most projects not only pass throughUpload some JS and CSS files over FTP. And nowFrontend generation process,It can include sass and less extensions, CSS/JS compressed packages, jshint or jslint runtime, or more. These generated tasks and processes work together with tools such as gulp and grunt. In addition, management systems like NPM and Bower manage client libraries as software packages.

The Administrator of the ASP. NET client software package, why not use nuget? Or msbuild?

Some of you may ask, why does JavaScript not use nuget? Why not expand msbuild to build CSS/JS? The reason is simple. Because there are already a variety of systems to do this. For server-side libraries (and some clients), it is great to use nuget. There are already a lot of NPM and Bower, and there will be more CSS and JS libraries. Msbuild is great for server-side application building, but it is redundant when building client applications.

Therefore, both can be used. These are all tools in your toolkit. Add support for gulp, grun, Bower, and NPM (and other things are needed in the future), which means to provide a more familiar environment for ASP. NET front-end developers. It allows ASP. NET developers to introduce JS and CSS libraries so that they can use them every day.

Introduce task Resource Manager

We have received a considerable number of grunt/gulp functional requests from you and the whole society. We are building support for grunt/gulp first stream with the full scalability of Visual Studio "14. Now we are ready to add this support to the preview version as an extension of vs2013, and we are grateful to you for helping us test and evaluate this feature.

Today, we will introduce a preview version. In this preview version, "task Resource Manager" will be used as vsix.We also recommend two otherVsixTo improve the experience of this function.

Note:VsixMost of the extended functions are built inVisual StudioSo you do not need to install anything else. And,InVs2013And in this preview version, we need moreVsixSo that you can get these extensions sooner or later.Note that task Resource Manager only works onVsiaual studio ExpressVersion,Vs14All functionsVSFree version.

Similar to vs productivity power tools, features such as "devlabs" are still in the preview version. But they will eventually be integrated into the final product.

What do you need? First, you will need Visual Studio 2013.3, 3 means free Update 3 ".

1. Trx-Task Resource ManagerVisual Studio Extension
2. NMP/nbower package smart sensing-search NPM and Bower package online edition, which directly adds the smart sensing function.

3. Optional grunt launcher (right-click the option in Solution Explorer-you will see "NPM install")

   • If you do not have such an extension, you need to run NPM install to restore/Add the software package.
   • If you have such an extension, right-click packages. JSON and "NPM install" before running grunt/gulp"

To open TRX (Task Resource Manager), right-click any gruntfile. js file in your project:

By default, TRX is located at the bottom of Vs and looks like this:

Here, we can see that gruntfile. JS is in the root directory of one or more projects in this solution. It also hasTask binding function, that is, any task or target can be4ItemsDifferentVisual StudioEvent trigger.

To bind a task/target with a vs event, right-click the event and choose bind settings.

To run any task/target, double-click it and the console displays the following:

When you have the software package smart sensing Extension function, you will find that using bower and NPM to directly edit package. JSON can easily add and update software packages.

Even you have the asynchronous metadata filling tooltip function.

Now you can test it. Remember to run "NPM install" before you use the task Resource Manager to run the grunt task ".

Introduction to gulp, grunt, Bower, and NPM support for Visual Studio