ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bowe
2015-09-28 10:47
906 查看
摘要 基于Visual Studio 2015,你可以方便的管理前端包,如jQuery, Bootstrap, 或Angular。
Visual Studio 2015 Grunt Bower
目录[-]静态文件和wwwroot
使用Bower来进行前端包管理
使用Grunt运行任务调度
基于Visual Studio 2015,你可以:方便的管理前端包,如jQuery, Bootstrap, 或Angular。
自动运行任务,如LESS、JavaScript压缩、JSLint、JavaScript单元测试等。
方便的获得Web开发者生态圈的工具包。
为了实现这些场景,Visual Studio 2015已经内置了一些流行的第三方工具包:Bower:Web包管理器,Bower可以帮你安装前端包,包括JavaScript、CSS类库。对于服务器端包,请通过NuGet包管理。
Grunt and Gulp:Grunt和Gulp是基于JavaScript的运行任务。如你未用过类似功能,可以认为这是一个自动调度运行的app,ASP.NET 5工程模板使用的是Grunt运行任务。
npm (Node Package Manager). npm是一个node包管理器,最初被用于Node.js包管理。上面说的Bower、Grunt、Gulp用到了npm。
启动Visual Studio 2015,新建一个ASP.NET 5.0的工程,选择文件-> 新建工程->Visual C#->Web->ASP.NET Web应用程序:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/89bfe0977d9abfd86d021c58bf2962c6.png)
在新建工程对话框,选择ASP.NET 5.0 Starter Web
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/2767dea6402d99e7f684fbd7386fe80d.png)
创建一个ASP.NET MVC 6 app,工程文件结构如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/79ca07ec9bcd2169ba6a48444f5fb07e.png)
该工程下,包括如下重要的配置文件:Project.json. 主工程文件,NuGet 包依赖清单.
package.json. npm包清单.
bower.json. Bower包清单.
gruntfile.js. 配置Grunt任务.
编译LESS or Sass 文件为CSS.
压缩JavaScript.
优化image文件.
以上的操作会把wwwroot文件夹外的代码文件进行编译,然后拷贝到wwwroot文件夹下,这样前端即可访问。可通过任务调度自动执行这些步骤。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/67da633c995fc4b850fb554b5d372c78.png)
也可以获得包版本号的智能提示
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/68d4cf29360662b0f2818423faaa8d2d.png)
现在安装最新包,在解决方案视图,点击Dependencies,然后在Bower文件夹上右击单击Restore Packages.
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/7535214774230b046459a12069b72c3f.png)
可通过Output 窗体查看安装的细节。 包被安装到bower_components文件夹。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/1ff98391a0e3011b3585befe0d25943b.png)
Visual Studio会自动加载对应版本的包在您的解决方案中。这样包文件就不用上传到源码管理下。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/c5207565946ff71ba70efe7eb9bd4069.png)
在assets文件夹上右键,选择Add > New Item. 在新建项对话框中,选择LESS Style Sheet文件,命名为“site.less”.
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/f7db57d00005de3d0ee8d7a9f8b0923c.png)
粘贴如下代码到site.less文件
在Grunt文件中配置task.
绑定task到Visual Studio编译任务中
在package.json文件中,配置grunt-contrib库。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/119694c62bea8322a3599fbf88e857f2.png)
同样可智能感知出版本号:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/791aed0ac303a3d801e3672739909c23.png)
在解决方案,点击Dependencies > NPM,你可以看到
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/fe46bed9bd3f074eb66a71510ccd8f1a.png)
点击右键,Restore Packages。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/caa4d2252fc4bd9832c0b6c37de9d822.png)
安装完成的gruntfile.js 文件如下所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/09a276f936a7eee57c5affc48e677245.png)
通过选择任务名称“less”,点击Run运行:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/516ce4b287ca8f7cd922528c8fc864c5.png)
output窗口运行如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/4b632427c51e5c5b8f517c7f29719ef0.png)
打开/wwwroot/css/site.css文件,可看到编译后的CSS文件如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/9415fc79e7edd1b7d20793677b013b4e.png)
配置自动运行:通过Bindings > After Build 即可配置自动运行。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/a63fb72790c1f37155f197c8241bf9b7.png)
Visual Studio 2015 Grunt Bower
目录[-]静态文件和wwwroot
使用Bower来进行前端包管理
使用Grunt运行任务调度
基于Visual Studio 2015,你可以:方便的管理前端包,如jQuery, Bootstrap, 或Angular。
自动运行任务,如LESS、JavaScript压缩、JSLint、JavaScript单元测试等。
方便的获得Web开发者生态圈的工具包。
为了实现这些场景,Visual Studio 2015已经内置了一些流行的第三方工具包:Bower:Web包管理器,Bower可以帮你安装前端包,包括JavaScript、CSS类库。对于服务器端包,请通过NuGet包管理。
Grunt and Gulp:Grunt和Gulp是基于JavaScript的运行任务。如你未用过类似功能,可以认为这是一个自动调度运行的app,ASP.NET 5工程模板使用的是Grunt运行任务。
npm (Node Package Manager). npm是一个node包管理器,最初被用于Node.js包管理。上面说的Bower、Grunt、Gulp用到了npm。
启动Visual Studio 2015,新建一个ASP.NET 5.0的工程,选择文件-> 新建工程->Visual C#->Web->ASP.NET Web应用程序:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/89bfe0977d9abfd86d021c58bf2962c6.png)
在新建工程对话框,选择ASP.NET 5.0 Starter Web
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/2767dea6402d99e7f684fbd7386fe80d.png)
创建一个ASP.NET MVC 6 app,工程文件结构如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/79ca07ec9bcd2169ba6a48444f5fb07e.png)
该工程下,包括如下重要的配置文件:Project.json. 主工程文件,NuGet 包依赖清单.
package.json. npm包清单.
bower.json. Bower包清单.
gruntfile.js. 配置Grunt任务.
静态文件和wwwroot
wwwroot 文件夹在ASP.NET 5.0中是新增的,工程中所有的静态文件存放于此。且客户端可直接访问这些文件,包括HTML文件、CSS文件、Images文件、JavaScript文件。wwwroot文件夹是网站的根目录,如这个域名http://hostname/指向wwwroot文件夹。代码应该存放在wwwroot外,包括C#文件、Razor文件,既wwwroot文件夹用于实现代码文件、静态文件的隔离。编译CoffeeScript or TypeScript 文件为JavaScript.
编译LESS or Sass 文件为CSS.
压缩JavaScript.
优化image文件.
以上的操作会把wwwroot文件夹外的代码文件进行编译,然后拷贝到wwwroot文件夹下,这样前端即可访问。可通过任务调度自动执行这些步骤。
"webroot": "wwwroot""version": "1.0.0-*" }
使用Bower来进行前端包管理
下面我们看看如何在Visual Studio 2015 中使用Bower进行前端包管理,在本节中,我们天津RequireJs类库给app。打开bower.json,在dependencies节添加requirejs入口。"dependencies""bootstrap": "~3.0.0""jquery": "~1.10.2""jquery-validation": "~1.11.1""jquery-validation-unobtrusive": "~3.2.2""requirejs": "^2.1"备注:bower版本语法模式是”major.minor.patch”. 在^2.1中,字符'^’指定最小版本号。'~1.10.2' 用于指定最小为1.10.2版本,或者任何1.10的最新补丁。 更多细节,请查看Github:https://github.com/npm/node-semver.在Visual Studio 2015下,可使用智能感知获得可用包的列表:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/67da633c995fc4b850fb554b5d372c78.png)
也可以获得包版本号的智能提示
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/68d4cf29360662b0f2818423faaa8d2d.png)
现在安装最新包,在解决方案视图,点击Dependencies,然后在Bower文件夹上右击单击Restore Packages.
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/7535214774230b046459a12069b72c3f.png)
可通过Output 窗体查看安装的细节。 包被安装到bower_components文件夹。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/1ff98391a0e3011b3585befe0d25943b.png)
Visual Studio会自动加载对应版本的包在您的解决方案中。这样包文件就不用上传到源码管理下。
使用Grunt运行任务调度
使用gruntfile.js 文件来定义Grunt任务,默认的工程模板包括了这样的任务,如Bower包管理器。下面我们使用Grunt来添加LESS处理、编译过程。在工程下,创建一个文件夹assets。![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/c5207565946ff71ba70efe7eb9bd4069.png)
在assets文件夹上右键,选择Add > New Item. 在新建项对话框中,选择LESS Style Sheet文件,命名为“site.less”.
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/f7db57d00005de3d0ee8d7a9f8b0923c.png)
粘贴如下代码到site.less文件
-使用@base 变量用于定义颜色值,这个变量被用于LESS的特性。安装task,创建一个Grunt task或者复用一个存在的.
在Grunt文件中配置task.
绑定task到Visual Studio编译任务中
在package.json文件中,配置grunt-contrib库。
"version": "0.0.0""name": "MyApp""devDependencies""grunt": "^0.4.5""grunt-bower-task": "^0.4.0" "grunt-contrib-less": "^0.12.0"在输入的时候,同样会看到可用包列表:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/119694c62bea8322a3599fbf88e857f2.png)
同样可智能感知出版本号:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/791aed0ac303a3d801e3672739909c23.png)
在解决方案,点击Dependencies > NPM,你可以看到
grunt-contrib-less已经被列出来,但是目前尚未安装。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/fe46bed9bd3f074eb66a71510ccd8f1a.png)
点击右键,Restore Packages。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/caa4d2252fc4bd9832c0b6c37de9d822.png)
安装完成的gruntfile.js 文件如下所示:
module.exports = "wwwroot/lib""byComponent""Assets""wwwroot/css/site.css": "assets/site.less""default", ["bower:install""grunt-bower-task" grunt.loadNpmTasks("grunt-contrib-less"initConfig方法使用initConfig方法来配置Grunt任务。每个Grunt插件有他自己的配置项集合。如,我们可以配置grunt-contrib-less编译为assets/site.less文件,然后拷贝到wwwroot/css/site.css.loadNpmTasks方法从Grunt插件中加载任务,工程模板默认通过这个来加载grunt-bower-task。下面添加一个
grunt-contrib-less。
在解决方案视图,选择gruntfile.js 右键Task Runner Explorer
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/09a276f936a7eee57c5affc48e677245.png)
通过选择任务名称“less”,点击Run运行:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/516ce4b287ca8f7cd922528c8fc864c5.png)
output窗口运行如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/4b632427c51e5c5b8f517c7f29719ef0.png)
打开/wwwroot/css/site.css文件,可看到编译后的CSS文件如下:
-color: #008080运行程序,背景色已经被真实颜色修改了:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/9415fc79e7edd1b7d20793677b013b4e.png)
配置自动运行:通过Bindings > After Build 即可配置自动运行。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/10/a63fb72790c1f37155f197c8241bf9b7.png)
相关文章推荐
- ASP.NET 5 MVC6系列教程 (四):向视图中添加服务和发布应用到公有云
- ASP.NET 5 MVC6系列教程 (三):view components介绍
- Asp.net MVC中Html.Partial, RenderPartial, Action,RenderAction 区别和用法
- ASP.NET 5 MVC6系列教程 (二):Hello World
- ASP.NET 5系列教程 (一):领读新特性
- asp rs开启关闭问题
- asp 页面乱码问题
- AspNet MVC4 教育-28:Asp.Net MVC4 Ajax技术部门四舍五入余速Demo
- ASP.NET学习笔记(001):HTML
- ASP.NET对txt文件相关操作(读取、写入、保存)
- ASP.NET搭配Ajax实现搜索提示功能
- ASP.NET 状态管理(视图状态 ViewState)
- Asp.net中static变量和viewstate的使用方法(谨慎)
- ASP.NET MVC验证框架中关于属性标记的通用扩展方法
- ASP.NET WebAPI 05 参数绑定
- ASP.NET Identity
- ASP.NET餐饮管理系统制作代码分享
- ASP.NET Web API 异常日志记录
- ASP.NET MVC 2右键菜单和简单分页实例讲解
- asp.net分页功能实现