[原文发表地址]Introducing Gulp, Grunt, Bower, and npm support for Visual Studio

Web 开发,特别是前端 Web 开发,正迅速变得像传统的后端开发一样复杂和精密。大多数项目不仅仅是通过 FTP上传一些 JS 和 CSS 文件。而现在的前端生成过程,可以囊括SASS 和LESS扩展、CSS/JS的压缩包、JSHint 或 JSLint的运行时 、或者更多。这些生成任务和进程都和像Gulp和Grunt这样的工具一起协调工作。此外,类似于npm和bower这样的管理系统将客户端库作为软件包来管理。

ASP.NET客户端软件包的管理者,为什么不用 NuGet?或MSBuild?

你们中的一些人可能会问,为什么JavaScript不使用 NuGet?为什么不扩展 MSBuild 去构建 CSS/JS?原因很简单。因为已经有了丰富的系统,来做这种事情。对于服务器端库 (和一些客户端)来说,使用NuGet 就已经很棒了。npm和bower 上已经有了很多的,而且还会有更多的 CSS 和 JS 库。而对于服务器端的应用程序构建来说,使用MSBuild很棒,但当构建客户端应用程序时,它有些多余了。

所以,两者都可以使用。这些都是您工具包中的工具。添加Gulp,Grun,Bower,npm的支持(和将来需要其他东西) ,这意味着为ASP.NET前端开发者提供了一个更熟悉的环境。它允许 ASP.NET 开发人员引入 JS 和 CSS 库,使他们可以每天使用。

引入任务资源管理器

我们从你们中,以及整个社会收到了相当多的、关于Grunt/Gulp的功能请求。我们利用Visual Studio “14的充分可扩展性正在构建对Grunt/Gulp第一流的支持。现在我们已经准备好将这个支持作为VS2013的一个扩展加入到预览版本中, 并且我们感激您帮助我们测试和考察这个功能。

今天我们介绍一个预览版本,在这个预览版本中,“任务资源管理器”将作为VSIX的一个扩展。同时也推荐两个其他的VSIX来完善对这个功能的体验。

注意:VSIX扩展中的大多数功能都被内置到Visual Studio中,因此你不需要安装其他别的东西。而且,VS2013和此预览版本中我们需要更多的VSIX,让你迟早能得到这些扩展。请注意,今天任务资源管理器只工作于Vsiaual Studio Express 版本中,但VS14的所有功能都将出现在VS免费版本中。

类似于VS Productivity Power Tools一样, “DevLabs”这样的功能现在还在预览版中。但是他们终将会集成到最终的产品中。

你需要什么?
首先,你将需要Visual Studio 2013.3 ,3的意思是免费的更新”Update 3”。
  1. TRX-任务资源管理器Visual Studio 扩展
  2. NMP/NBower包智能感知-搜索NPM 和Bower包在线版,它直接附加智能感知功能。
  3. 可选的Grunt Launcher(在解决方案资源管理器上右键单击选项— — 你会看到” npm install “)

    • 如果你现在没有这种扩展,那么你将需要自己运行npm install来还原/添加软件包
    • 如果你有这种扩展,那么请在运行grunt/gulp之前,右键单击 packages.json 和”npm install”

要打开 TRX (任务资源管理器),只需用鼠标右键单击您的项目中任何一个 gruntfile.js文件:

默认情况下,TRX 位于VS的底部,,看起来像这样:

在这里,我们看到 gruntfile.js 在该解决方案中的一个或多个项目的根目录中。它还有任务绑定功能,也就是说任何任务或目标可以由 4 不同 Visual Studio 事件触发。

要想将一个任务/目标和一个VS事件绑定在一起,只需右键单击进行绑定设置。

要想运行任何一个任务/目标,只需双击它,然后控制台将显示如下:

当你有了软件包智能感知扩展功能时,你会发现通过bower 和 npm来直接编辑package.json很容易添加并更新软件包。

甚至,你也有了异步填充元数据工具提示功能。

现在你可以去测试它了,记住在你用任务资源管理器来运行Grunt任务之前,你需要运行“ npm install” 。

简介Gulp, Grunt, Bower, 和 Npm 对Visual Studio的支持的更多相关文章

  1. [转]简介Gulp, Grunt, Bower, 和 Npm 对Visual Studio的支持

    本文转自:http://www.cnblogs.com/whitewolf/p/4009199.html [原文发表地址]Introducing Gulp, Grunt, Bower, and npm ...

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

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

  3. .NET 开源了,Visual Studio 开始支持 Android 和 iOS 程序编写并自带 Android 模拟器

    .NET 开源了,Visual Studio 开始支持 Android 和 iOS 程序编写并自带 Android 模拟器 北京时间今天凌晨的 Connect(); 大会上,多少程序员的假想成为现实. ...

  4. 简易扩展Visual Studio UnitTesting支持TestMethodCase

    NUnit的TestCaseAttribute可以简化大量的测试参数输入用例的编写,如果基于Visual Studio Unit Test Project开发则默认没有类似的功能,看一段对比代码: p ...

  5. VS2015提示:未安装Style的Visual Studio语言支持,代码编辑Intellisense将不可用。服务器控件的标记Intellisense可能不起作用

    一.问题 最近在VS2015打开文件,提示未安装Style的Visual Studio语言支持,代码编辑Intellisense将不可用.服务器控件的标记Intellisense可能不起作用. Int ...

  6. 让Visual Studio x64 支持 __asm内联汇编

    目录 让Visual Studio x64 支持 __asm内联汇编 Intel Parallel Studio XE 2016安装 设置Interl C++ Compiler 使VS x64支持内联 ...

  7. Visual Studio 2013支持Xamarin的解决方案

    转自博客园[遗忘的代码] Xamarin的Visual Studio插件目前还不支持VS 2013,所以需要在安装Xamarin的VS插件时把2010和2012全选上 (由于我的电脑里只剩2013,而 ...

  8. Visual Studio 2013 支持MVC3不完善,Razor智能提示不完整或者不提示

    以下只是针对MVC3. 前天试用Orchard 1.8,用VS2013新建C#类库项目(ClassLibrary project),然后新建Views文件夹,新建cshtml,然后引用MVC3的相关d ...

  9. Visual Studio 2015支持为Linux构建应用

    点这里 微软著名的集成开发环境有可能是首次在其产品页提及了竞争对手Linux.Visual Studio 2015的页面声称,“Build for iOS, Android, Windows devi ...

随机推荐

  1. PoEdu- C++阶段班【Po学校】-Lesson03_构造函数精讲 - 第5天

    复习构造函数:1  与类同名   2  没有返回值   3  自动生成    4  手动后,不会自动生成    5  不在特定的情况下,不会私有  新建 类   两种方法示范   其一:在vs中选择类 ...

  2. [erlang]supervisor(监控树)的重启策略

    1. init函数 init() -> {ok, {SupFlags, [ChildSpec,...]}} | ignore. [ChildSpec,...] 是在init之后默认要启动的子进程 ...

  3. div+css实例教程

    DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离. 对于初学者来说,可能比较模糊不熟悉.毕竟,样式布局需要通 ...

  4. Hadoop入门之安装配置(hadoop-0.20.2)

    Hadoop,简单理解为HDFS(分布式存储)+Mapreduce(分布式处理),专为离线和大规模数据分析而设计. Hadoop可以把很多linux的廉价PC组成分布式结点,然后编程人员也不需要知道分 ...

  5. Python赋值语句与深拷贝、浅拷贝的区别

    参考:http://stackoverflow.com/questions/17246693/what-exactly-is-the-difference-between-shallow-copy-d ...

  6. Hibrenate学习的第一天

    问题一:用sqlyog创建一个数据库,用Hibernate传入中文为什么变? 答:在hibernate中的数据连接处要添加 ?useUnicode=true&characterEncoding ...

  7. LinuxMM--MemoryHierarchy

    MemoryHierarchy  为了理解内核中的页替换算法,有必要认识linux中的存储体系分层架构.访问模式以及混合工作mixed workloads. 存储器分层架构  有两种类型的存储分层架构 ...

  8. 1282 - Leading and Trailing ---LightOj1282(快速幂 + 数学)

    http://lightoj.com/volume_showproblem.php?problem=1282 题目大意: 求n的k次方的前三位和后三位数然后输出 后三位是用快速幂做的,我刚开始还是不会 ...

  9. python第一天基础1-2

    python入门 1 第一个python代码: 在linux上创建第一个.py脚本 #!/usr/bin/env python #-*- coding:utf-8 -*- print "He ...

  10. angular JS 做分页

    在网上找了一天,连一个像样点的分页DEMO都没找到,晕死了.大部分都是相互抄,有各种各样的问题,要不是代码有BUG,要不就是解释不明,GITHUB上下载下来的总是乱糟糟的.心累.