ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower开发Web程序

简介:

基于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应用程序:

image

 

在新建工程对话框,选择ASP.NET 5.0 Starter Web

image

 

创建一个ASP.NET MVC 6 app,工程文件结构如下:

image

 

该工程下,包括如下重要的配置文件:

  • 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下,可使用智能感知获得可用包的列表:

image

 

也可以获得包版本号的智能提示

image

 

现在安装最新包,在解决方案视图,点击Dependencies,然后在Bower文件夹上右击单击Restore Packages.

image

 

可通过Output 窗体查看安装的细节。 包被安装到bower_components文件夹。

image

Visual Studio会自动加载对应版本的包在您的解决方案中。这样包文件就不用上传到源码管理下。

 

使用Grunt运行任务调度

使用gruntfile.js 文件来定义Grunt任务,默认的工程模板包括了这样的任务,如Bower包管理器。

下面我们使用Grunt来添加LESS处理、编译过程。

在工程下,创建一个文件夹assets。

image

在assets文件夹上右键,选择Add > New Item. 在新建项对话框中,选择LESS Style Sheet文件,命名为“site.less”.

image

粘贴如下代码到site.less文件

@base: teal;
body {
    background-color: @base;
}

使用@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",        // Add this:
        "grunt-contrib-less": "^0.12.0"
    }
}

在输入的时候,同样会看到可用包列表:

image

同样可智能感知出版本号:

image

 

在解决方案,点击Dependencies > NPM,你可以看到grunt-contrib-less已经被列出来,但是目前尚未安装。

image

点击右键,Restore Packages。

image

安装完成的gruntfile.js 文件如下所示:

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/lib",
                    layout: "byComponent",
                    cleanTargetDir: true
                }
            }
        },        // Add this JSON object:        less: {
            development: {
                options: {
                    paths: ["Assets"],
                },
                files: { "wwwroot/css/site.css": "assets/site.less" }
            },
        }
    });

    grunt.registerTask("default", ["bower:install"]);

    grunt.loadNpmTasks("grunt-bower-task");    // Add this line:
    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

image

通过选择任务名称“less”,点击Run运行:

image

 

output窗口运行如下:

image

 

打开/wwwroot/css/site.css文件,可看到编译后的CSS文件如下:

body {
  background-color: #008080;
}

运行程序,背景色已经被真实颜色修改了:

image

配置自动运行:通过Bindings > After Build 即可配置自动运行。

image

 



本文转自 powertoolsteam 51CTO博客,原文链接:http://blog.51cto.com/powertoolsteam/1608626,如需转载请自行联系原作者

相关文章
|
9天前
|
开发框架 算法 Java
.NET 开发:实现高效能的秘诀
【7月更文挑战第4天】探索.NET高效开发涉及理解运行时(如GC、JIT)、代码与算法优化及工具利用。关键点包括适应性垃圾回收、异步编程、明智的并发控制;编写高效代码(避免对象创建,选对数据结构和算法);使用性能分析工具,善用高性能框架如ASP.NET Core,并借助云服务和CI/CD流程持续优化。性能优化是持续学习与实践的过程。
21 1
|
28天前
|
开发框架 前端开发 .NET
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码
集成于VS 2019,EXT.NET前端和ASP.NET后端,搭配MSSQL 2018数据库。系统覆盖样品管理、数据分析、报表和项目管理等实验室全流程。应用广泛,包括生产质检(如石化、制药)、环保监测、试验研究等领域。随着技术发展,现代LIMS还融合了临床、电子实验室笔记本和SaaS等功能,以满足复杂多样的实验室管理需求。
36 3
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码
|
9天前
|
人工智能 前端开发 Devops
NET技术在现代开发中的影响力日益增强,本文聚焦其核心价值,如多语言支持、强大的Visual Studio工具、丰富的类库和跨平台能力。
【7月更文挑战第4天】**.NET技术在现代开发中的影响力日益增强,本文聚焦其核心价值,如多语言支持、强大的Visual Studio工具、丰富的类库和跨平台能力。实际应用涵盖企业系统、Web、移动和游戏开发,以及云服务。面对性能挑战、容器化、AI集成及跨平台竞争,.NET持续创新,开发者应关注技术趋势,提升技能,并参与社区,共同推进技术发展。**
10 1
|
9天前
|
机器学习/深度学习 人工智能 开发者
.NET 技术:为开发带来新机遇
【7月更文挑战第4天】**.NET技术开启软件开发新篇章,通过跨平台革命(.NET Core, Xamarin, .NET MAUI)、云服务与微服务(Azure, DevOps, Docker)及AI集成(ML.NET, 认知服务, TensorFlow)为开发者创造新机遇。开源社区的繁荣与性能提升使.NET更具竞争力,推动智能应用的创新与发展。开发者需紧跟潮流,利用这些工具和框架构建高效、创新的解决方案。**
8 1
|
11天前
|
开发框架 JSON .NET
|
1月前
|
开发框架 JavaScript 前端开发
分享7个.NET开源、功能强大的快速开发框架
分享7个.NET开源、功能强大的快速开发框架
|
2月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
111 0
|
2月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
44 0
|
2月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
166 5
|
2月前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界