在 Visual Studio 2013 中使用 Grunt, Bower 和 NPM

在 Visual Studio 2015 中提供了对于 Grunt 和 Gulp 的内置支持,在 Visual Studio 2013 中怎么办呢?微软将 2015 中的特性作为几个独立的扩展发布出来,你可以在 Visual Studio 2013 中同样使用这个特性。

实际上,你需要三个扩展。

1. 安装

首先,你需要 Visual Studio 2013.3,也就是说,安装了 Visual Studio 的第三个更新包。

1. Task Runner Explorer

Grunt 的可视化任务管理器。

扩展地址:https://visualstudiogallery.msdn.microsoft.com/8e1b4368-4afb-467a-bc13-9650572db708

2. Package Intellisense

通过搜索在线的 NPM 和 Bower 包进行智能提示。

扩展地址:https://visualstudiogallery.msdn.microsoft.com/65748cdb-4087-497e-a394-2e3449c8e61e

3. Grunt Launcher

可选,提供了在解决方案管理器上右键菜单中包含 "npm install",在 package.json 中右键菜单支持,在运行 grunt/gulp 任务之前执行 “npm install”。

扩展地址:https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff

2. 使用

在 gruntfile.js 文件上右键,可以弹出管理任务的菜单。

在 Visual Studio 2013 中使用 Grunt, Bower 和 NPM

默认情况下,Task Runner Explorer 会出现在 Visual Studio 的下面。

在 Visual Studio 2013 中使用 Grunt, Bower 和 NPM

还可以被 Visual Studio 的 4 个事件之一触发。

在 Visual Studio 2013 中使用 Grunt, Bower 和 NPM

双击任务就可以执行。

在 Visual Studio 2013 中使用 Grunt, Bower 和 NPM

可以在 NPM 的 package.json 文件编辑时,提供智能提醒。

在 Visual Studio 2013 中使用 Grunt, Bower 和 NPM

包括包版本

在 Visual Studio 2013 中使用 Grunt, Bower 和 NPM

悬停的提醒。

在 Visual Studio 2013 中使用 Grunt, Bower 和 NPM

演示一下。

在 Visual Studio 2013 中使用 Grunt, Bower 和 NPM

参考资料

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

上一篇:将本地文件复制到hadoop文件系统


下一篇:json信息的后台到前台的传输