(此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注。)

题记:ASP.NET 5和之前的ASP.NET版本有很大的不同,其中之一就是对前端库的管理不再使用Nuget,而是使用业界常用的做法——依赖Bower来管理。那么如何方便的添加前端库呢,今天就简单分享一下我的心得。

要通过Bower来添加前端库(以之前文章介绍过的MetroUI安装为例),打开项目下面的bower.json文件,在“dependencies”里面,添加一行描述:"metro": "3.0.5"。在输入包名的时候,VS会通过智能感知给出提示,包括版本号的选择也会给出。最终代码如下:

{
"name": "ASP.NET",
"private": true,
"dependencies": {
"bootstrap": "3.3.4",
"jquery": "1.10.2",
"jquery-validation": "1.11.1",
"jquery-validation-unobtrusive": "3.2.2",
"hammer.js": "2.0.4",
"bootstrap-touch-carousel": "0.8.0",
"metro": "3.0.5"
}
}

添加这行后,保存bower.json文件,VS就会自动去恢复MetroUI的包。展开项目中的“dependencies”节点下的“Bower”节点,就会看到“metro (3.0.5)”的节点。根据网络情况和包大小,可能需要稍等一下,直到这个节点后面的“not installed”字样消失,就说明包恢复成功了。如果自动恢复有问题,也可以点击这个节点,从右键菜单中选择“Update Package”。

安装好的包,只是被下载到了项目文件夹中的“bower_components”文件夹中的相应文件夹。你还需要通过Gulp或者Grunt这样的任务执行器把包的发布文件copy到lib目录下(lib目录是根据VS的习惯,你也可以选择其他目录)。由于VS默认项目模板使用的是Gulp,那么就打开gulpfile.js文件,找到“copy”这个task。在“bower”里面,添加copy描述。由于MetroUI的发布文件被放到了两个文件夹下“build”和“fonts”下,所以编写copy描述需要一点技巧来处理多个文件夹的copy。具体看如下代码:

var bower = {
"bootstrap": "bootstrap/dist/**/*.{js,map,css,ttf,svg,woff,eot}",
"bootstrap-touch-carousel": "bootstrap-touch-carousel/dist/**/*.{js,css}",
"hammer.js": "hammer.js/hammer*.{js,map}",
"jquery": "jquery/jquery*.{js,map}",
"jquery-validation": "jquery-validation/jquery.validate.js",
"jquery-validation-unobtrusive": "jquery-validation-unobtrusive/jquery.validate.unobtrusive.js",
"metro": "metro/build/**/*.{js,map,css}",
"metro/fonts": "metro/fonts/*.{ttf,svg,woff,eot}"
}

完善Gulp任务代码后,还需要执行copy任务,来把metro的发布文件复制到wwwroot下面的具体文件夹下面(在本例中是lib)。执行Gulp任务可以在“Task Runner Explorer”中手动执行,也可以编译解决方案或项目来自动执行。

最后,完成前端库的安装后,就是在HTML或视图文件中引用,具体写法我就不重复了。

应该说,VS 2015和ASP.NET 5的前端开发模式,既保持了现在业界流行的常规做法,又充分发挥了Visual Studio的强大IDE功能,让大家添加前端库变得轻而易举。

在ASP.NET 5中如何方便的添加前端库的更多相关文章

  1. asp.net core 中的SignalR与web前端进行实时通信

    一.介绍 SignalR是.net 开源库,用于构建需要实时进行用户交互和数据更新的web应用,如在线聊天,游戏,天气等实时应用程序,且简化了构建实时应用的过程,包括服务端库和js端库,继承了数种常见 ...

  2. Asp.Net Core中使用GDI+绘图提示gdiplus库找不到的问题

    参考  https://www.cnblogs.com/VirtualMJ/p/9917916.html 文章中   1 2 3 yum install -y epel-release yum mak ...

  3. windows系统中给qt工程添加第三方库

    · TEMPLATE = app CONFIG += console c++11 CONFIG -= app_bundle CONFIG -= qt SOURCES += main.cpp LIBS ...

  4. ASP.NET Core中使用GraphQL - 第六章 使用EF Core作为持久化仓储

    ASP.NET Core中使用GraphQL ASP.NET Core中使用GraphQL - 第一章 Hello World ASP.NET Core中使用GraphQL - 第二章 中间件 ASP ...

  5. ASP.NET Core 学习笔记 第四篇 ASP.NET Core 中的配置

    前言 说道配置文件,基本大多数软件为了扩展性.灵活性都会涉及到配置文件,比如之前常见的app.config和web.config.然后再说.NET Core,很多都发生了变化.总体的来说技术在进步,新 ...

  6. ASP.NET Core 中的那些认证中间件及一些重要知识点

    前言 在读这篇文章之间,建议先看一下我的 ASP.NET Core 之 Identity 入门系列(一,二,三)奠定一下基础. 有关于 Authentication 的知识太广,所以本篇介绍几个在 A ...

  7. Asp.net Core中使用Session

    前言 2017年就这么悄无声息的开始了,2017年对我来说又是特别重要的一年. 元旦放假在家写了个Asp.net Core验证码登录, 做demo的过程中遇到两个小问题,第一是在Asp.net Cor ...

  8. 在ASP.NET Core中使用百度在线编辑器UEditor

    在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...

  9. ASP.NET Core中如影随形的”依赖注入”[上]: 从两个不同的ServiceProvider说起

    我们一致在说 ASP.NET Core广泛地使用到了依赖注入,通过前面两个系列的介绍,相信读者朋友已经体会到了这一点.由于前面两章已经涵盖了依赖注入在管道构建过程中以及管道在处理请求过程的应用,但是内 ...

随机推荐

  1. sublime 支持php语法错误提示的插件

    求一个好用的sublime 支持php语法错误提示的插件.我装过sublimelinter,但是有时候出现错误也不会提示. 可以试试http://cs.sensiolabs.org/ 这个看哦它有对应 ...

  2. MongoDB-Getting Started with the C# Driver

    简介:本文仅提供快速入门级别的使用C# Driver操作MongoDB,高手跳过 Downloading the C# Driver 猛击下载 添加相关的dll引用 MongoDB.Bson.dll ...

  3. Binary Tree Non-recursive Traversal

    Preorder: public static void BSTPreorderTraverse(Node node) { if (node == null) { return; } Stack< ...

  4. C#之new修饰符

    转自MSDN:https://msdn.microsoft.com/zh-cn/library/435f1dw2.aspx  new隐藏基类成员 在用作修饰符时,new关键字可以显式的隐藏从基类继承的 ...

  5. poj 3984

    http://poj.org/problem?id=3984 题目很简单,就是简单的BFS吧,主要的难点在于坐标的问题 这个呢,可以反其道而行之,就是你从(1,1)到(5,5),你肯定走过一次 走过一 ...

  6. ios NSString 转 float的注意

    今天有一个字符串 “33.3”,用想用[valueString floatValue];得到33.3000这个值,结果得到了33.2999这个值,取前3位一个是33.3,一个是33.2,产生了错误,应 ...

  7. Linux下常用的硬件信息查看命令

    1.查看CPU型号,这里为了方便查看结合管道符用grep进行了匹配,当然只需要前面的命令也可以,命令如下: cat /proc/cpuinfo | grep "model name" ...

  8. ACM/ICPC 之 最短路径-dijkstra范例(ZOJ2750-POJ1135(ZOJ1298))

    最短路经典算法-dijkstra范例(两道),第一道是裸的dijkstra,第二道需要枚举所有边已找到可能的情况. ZOJ2750-Idiomatic Phrases Game 题意:见Code 题解 ...

  9. 5.SpringMVC静态文件的访问

    我们在进行springMVC开发时,必定会在jsp页面引入js文件.img文件和css文件.大多数人会将这些分类存放在WebRoot文件下新建的文件夹下面.同时,会在web.xml文件中配置拦截所有请 ...

  10. web.config中配置页面出错后跳转指定错误页面

    每当用户访问错误页面时,会出现不友好的404错误,所以为了防止这种不友好,我们在web.config中的<system.web>节点下配置 <customErrors>,在出现 ...