(此文章以发表在自微信公众号“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}"
  }

到家Gulpjson任务代码后,还得实行copy任务,来将metro的发布文件复制到wwwroot下面的切实可行文件夹下面(在本例中凡是lib)。执行Gulp任务可以在“Task
Runner Explorer”中手动执行,也可编译解决方案还是项目来机关执行。

最终,完成前端库底装后,就是于HTML或视图文件被援引,具体写法自就不又了。

应当说,VS 2015与ASP.NET
5的前端开发模式,既保障了现行业界流行的常规做法,又充分发挥了Visual
Studio的强有力IDE功能,让大家长前端库变得好。

相关文章

网站地图xml地图