引入对Visual Studio的Gulp，Grunt，Bower和npm支持

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.

Web开发，特别是前端Web开发，正Swift变得与传统的后端开发一样复杂和复杂。 大多数项目不只是通过FTP上传一些JS和CSS文件。 现在有一个前端构建过程，其中可以包括SASS和LESS的扩展，CSS / JS的最小化，运行JSHint或JSLint等。 这些构建任务和过程与Gulp和Grunt等工具进行协调。 此外，使用npm和bower之类的管理系统将客户端库作为软件包进行管理。

为什么要使用ASP.NET的客户端程序包管理器？ 为什么不选择NuGet？ 为什么不使用MSBuild？ (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.

可能有人会问，为什么不将NuGet用于JavaScript？ 为什么不扩展MSBuild来构建CSS / JS？ 简单。 因为这种事情已经有了丰富的生态系统。 NuGet非常适合服务器端库(和某些客户端)，但是npm和bower上有很多CSS和JS库。 MSBuild非常适合服务器端构建，但是在构建客户端应用程序时可能会过大。

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.

因此，请同时使用。 这些是您工具箱中的工具。 添加对Gulp，Grunt，Bower，npm(以及其他内容的支持)，对于使用ASP.NET的前端开发人员而言，这意味着更熟悉的环境，这为ASP.NET开发人员引入JS打开了大门。和CSS图书馆社区每天使用。

介绍任务运行器资源管理器 (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. 

我们收到了很多人以及整个社区有关Grunt / Gulp支持的大量功能请求。 我们正在Visual Studio“ 14”中为Grunt和Gulp提供一流的支持，并具有完全的可扩展性。 现在，我们准备发布此支持的预览，作为VS2013的扩展，非常感谢您测试和探索此功能的帮助。

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.

今天，我们将以VSIX扩展的形式介绍“ Task Runner Explorer ”的预览。 我们还建议使用另外两个VSIX来完善此功能的体验。

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.

注意：这些多个VSIX扩展中包含的许多功能将内置到Visual Studio中，因此您不需要安装太多东西。 但是，对于VS2013和此预览版，我们需要多个VSIX，以便早日得到帮助。 还要注意，今天只有Task Runner Explorer可以在Visual Studio Express上运行，而对于VS14则可以 这些功能将在免费的VS Express版本中运行。

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

现在将这些功能视为“ DevLabs”预览，就像VS Productivity Power Tools一样。 他们将毕业于最终产品。

你需要什么？ (What do you need?)

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

首先，您需要Visual Studio 2013.3-3表示“ Update 3”，这是一个免费更新。

1. TRX - Task Runner Explorer Visual Studio Extension

   TRX-任务运行器资源管理器 Visual Studio扩展

2. NPM/NBower Package Intellisense - Search for online NPM and Bower packages directly with Intellisense

   NPM / NBower软件包Intellisense-直接使用Intellisense搜索在线NPM和Bower软件包

3. Optional Grunt Launcher (gives right-click options in Solution Explorer - including "npm install")

   可选的Grunt Launcher (在解决方案资源管理器中提供右键单击选项-包括“ npm install”)

   • Without this extension, for now you'll need to run npm install yourself to restore/add packages.
     没有此扩展，现在您需要运行npm install来还原/添加软件包。
   • If you DO have this extension, right click on packages.json and "npm install" before running a grunt/gulp task.
     如果您有此扩展名，请在运行grunt / gulp任务之前右键单击packages.json和“ npm install”。

   Optional Grunt Launcher (gives right-click options in Solution Explorer - including "npm install")

   可选的Grunt Launcher (在解决方案资源管理器中提供右键单击选项-包括“ npm install”)

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

要打开TRX(任务运行器资源管理器)，只需右键单击项目中的任何gruntfile.js即可：

 

The TRX sits at the bottom of VS by default and looks like this:

默认情况下，TRX位于VS的底部，如下所示：

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.

在这里我们可以看到它在解决方案中的一个或多个项目的根目录中找到了gruntfile.js。 它还显示了任务绑定功能，该功能允许任何任务或目标由4个不同的Visual Studio事件触发。

To associate a task/target with a VS event, just right-click and setup bindings.

要将任务/目标与VS事件相关联，只需右键单击并设置绑定。

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.

获得Package Intellisense Extension后，直接为bower和npm编辑package.json时，您会发现添加和更新软件包很容易。

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.

在进行测试时，请记住，在使用Task Runner Explorer运行Grunt任务之前，您需要运行“ npm install”。

Big thanks to Mads Kristensen, Dan Chartier, and Van Kichline for their great work on this feature!

非常感谢Mads Kristensen，Dan Chartier和Van Kichline在此功能上所做的出色工作！

翻译自: https://www.hanselman.com/blog/introducing-gulp-grunt-bower-and-npm-support-for-visual-studio