ASP.NET Core 静态文件及JS包管理器(npm, Bower)的使用

2023-11-06 19:58

本文主要是介绍ASP.NET Core 静态文件及JS包管理器(npm, Bower)的使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在 ASP.NET Core 中添加静态文件

虽然ASP.NET主要大都做着后端的事情,但前端的一些静态文件也是很重要的。在ASP.NET Core中要启用静态文件,需要Microsoft.AspNetCore.StaticFiles组件。可以通过Nuget添加,或者在project.json配置文件中添加:

然后在Startup类中的Configre方法里调用UseStaticFiles扩展方法来实现:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory){loggerFactory.AddConsole(); app.UseStaticFiles();//使用静态文件//省略其他代码}

虽然现在很多人在开发.NET CORE时使用VS Code,但我还是不值得放弃VS这么强大的工具。
我们使用空的ASP.NET Core模板创建一个项目进行测试:

并添加上面说的Microsoft.AspNetCore.StaticFiles组件,然后在wwwroot文件夹中添加文件Hello.html,内容如下:

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>StaticDemo</title></head><body><h1>Hello From Static Files.</h1></body></html>

运行后,浏览器地址栏输入http://localhost:<port>/Hello.html<port>更改为自己的端口号。

官方说可以通过添加hosting.json配置来更改默认的wwwroot路径,但我更改后运行并没有效果。若有朋友知道怎么更改,还请告知!

我添加了hosting.json并添加如下配置后,该文件夹图标会改变,但运行后无法读取到静态文件,还是通过wwwroot路径读取。

{"webroot": "statics"}

返回目录

使用npm管理JavaScript包

在ASP.NET 5或之前使用JavaScript一般是使用NuGet来管理,在VS2015中添加了其他包管理工具,包括Node Package Manager (npm)Bower

要使用这些包管理工具,需要先添加配置文件,添加时保留默认名称:

因为安装了Web Essentials扩展,右下角显示了npm的logo。

添加配置文件后,在devDependencies节点增加需要使用的JS库的名称,在VS中还支持提示和自动完成:

版本号支持^~前缀。

  • 若没有前缀,只从服务器检索与提供的版本号一致的版本。

  • ^前缀,将检索与提供版本号主版本号一致的最新的版本。

  • ~前缀,将检索与提供版本号次版本号一致的最新的版本。

在配置文件添加了所需JS库后,会自动将JS库下载到node_modules文件夹(在VS项目中可能需要开启显示所有文件才能看到)。

但下载下来的文件其实很多我们都用不到,这时可以使用gulp创建任务,将我们需要的文件转移到web root文件夹。而node_modules文件夹就可以在版本控制,以及部署时忽略。

使用gulp压缩和构建JS

gulp是基于node.js构建的,所以我们需要在npm的配置package.json中添加对其的引用,其中包括几个常用插件。

{"name": "myproject","version": "1.0.0","devDependencies": {"gulp": "3.9.0","gulp-concat": "2.6.0","gulp-cssmin": "0.1.7","gulp-uglify": "1.2.0","rimraf": "2.4.2"}}

然后添加gulp的配置文件gulpfile.js(请查看前面添加nmp配置文件的图)。创建几个任务:

"use strict";
var gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify") var paths = {webroot: "./wwwroot/"};paths.node_modules_libs = [    'node_modules/jquery/dist/jquery.js','node_modules/bootstrap/dist/js/bootstrap.js',]paths.lib = paths.webroot + 'lib/*.js';
paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.concatJsDest = paths.webroot + "js/site.min.js";gulp.task('lib', function () {    
//复制npm包到web root中gulp.src(paths.node_modules_libs).pipe(gulp.dest(paths.webroot + 'lib'))});gulp.task("clean:js", function (cb) {   //清理压缩后的js文件rimraf(paths.concatJsDest, cb);});
gulp.task("min:js", function () {  //将需要的js压缩并合并成一个文件以减少http请求数gulp.src([paths.js, "!" + paths.minJs, paths.lib], { base: "." }).pipe(concat(paths.concatJsDest)).pipe(uglify()).pipe(gulp.dest("."));});

其中lib任务将node_modules中需要的文件复制到webrootlib文件夹,另两个任务分别用于清除文件和压缩文件。

在VS2015中,可以通过“任务运行程序资源管理器”(右键gulp配置文件,或通过视图-其他窗口-任务运行程序资源管理器)进行任务管理,也可以将任务绑定到相应事件以自动运行。
其中清除会在清理项目时运行。

运行后目录结构:

压缩合并后,前端页面只需引用一个site.min.js就可以了。

gulp就不多说了,这里推荐个中文学习网站:Gulp 中文网。

返回目录

使用Bower管理JavaScript包

因为npm是node.js的包管理工具,而node.js主要用于构建服务端程序。所以,其实客户端的包管理工具我们有更好的选择:Bower

使用时可以添加Bower配置文件,或右键项目选择“管理Bower程序包”。Bower在VS中使用方法和Nuget很像。

JS包默认安装到webrootlib文件夹,可以通过.bowerrc文件更改安装路径。

相关文章:

  • 依赖注入的威力,.NET Core的魅力:解决MVC视图中的中文被html编码的问题

  • .NET Core 1.0.1 发布了

  • 在.NET Core程序中设置全局异常处理

  • IBM® Bluemix 上运行ASP.NET Core

  • ASP.NET Core开发-Docker部署运行

  • Asp.net Core 使用MyCat分布式数据库,实现读写分离

  • .Net Core 中的包、元包与框架(Packages, Metapackages and Frameworks)

  • .NET Core系列 : 1、.NET Core 环境搭建和命令行CLI入门

  • .NET Core系列 : 2 、project.json 这葫芦里卖的什么药

  • .NET Core系列 :3 、使用多个项目

  • .NET Core系列 :4 测试

  • .NET Core 系列5 :使用 Nuget打包类库

  • Asp.net Core基于MVC框架实现PostgreSQL操作

  • 用Swashbuckle给ASP.NET Core的项目自动生成Swagger的API帮助文档

原文地址:http://www.cnblogs.com/hjklin/p/5883855.html


.NET社区新闻,深度好文,微信中搜索dotNET跨平台或扫描二维码关注

这篇关于ASP.NET Core 静态文件及JS包管理器(npm, Bower)的使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/358741

相关文章

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

Android中Dialog的使用详解

《Android中Dialog的使用详解》Dialog(对话框)是Android中常用的UI组件,用于临时显示重要信息或获取用户输入,本文给大家介绍Android中Dialog的使用,感兴趣的朋友一起... 目录android中Dialog的使用详解1. 基本Dialog类型1.1 AlertDialog(

Python使用自带的base64库进行base64编码和解码

《Python使用自带的base64库进行base64编码和解码》在Python中,处理数据的编码和解码是数据传输和存储中非常普遍的需求,其中,Base64是一种常用的编码方案,本文我将详细介绍如何使... 目录引言使用python的base64库进行编码和解码编码函数解码函数Base64编码的应用场景注意