在 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文件更改安装路径。

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

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

    NET Core 静态文件及JS包管理器(npm, Bower)的使用 文章目录 在 ASP.NET Core 中添加静态文件 使用npm管理JavaScript包 使用Bower管理JavaScri ...

  2. Node.js包管理器Yarn的入门介绍与安装

    FAST, RELIABLE, AND SECURE DEPENDENCY MANAGEMENT. 就在昨天, Facebook 发布了新的 node.js 包管理器 Yarn 用以替代 npm .咱 ...

  3. Node.js包管理器:

    Node.js包管理器: 当我们要把某个包作为工程运行的一部分时,通过本地模式获取,如果要在命令行下使用,则使用全局模式安装 使用全局模式安装的包并不能直接在JavaScript文件中用require ...

  4. 细说ASP.NET Core静态文件的缓存方式

    一.前言 我们在优化Web服务的时候,对于静态的资源文件,通常都是通过客户端缓存.服务器缓存.CDN缓存,这三种方式来缓解客户端对于Web服务器的连接请求压力的. 本文指在这三个方面,在ASP.NET ...

  5. 前端开发bower包管理器

    Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,他可以很好的帮助你帮你解决js的依赖管理,比如jquery angular bootstrap 等等. 可以很方便的 ...

  6. NET Core静态文件的缓存方式

    NET Core静态文件的缓存方式 阅读目录 一.前言 二.StaticFileMiddleware 三.ASP.NET Core与CDN? 四.写在最后 回到目录 一.前言 我们在优化Web服务的时 ...

  7. ASP.NET5 中静态文件的各种使用方式

    所谓静态文件,包含HTML文件,css文件.图片文件和js文件等,他们是服务器直接读取到客户端的一些资源,在这篇文章中,我们将解释关于ASP.NET5和静态文件的一些内容. 服务端的静态文件 默认情况 ...

  8. 【转】包管理器Bower详细讲解

      包管理器Bower   今天自己用Angular写东西的时候,下载了Angular-seed项目,发现需要用到bower,之前也使用过,没有仔细了解,今天趁机了解到一些. bower的官网地址:  ...

  9. Bower =&gt; 前端开发也有包管理器

    摘要: 一直以来npm,pip等各种包管理器好像都和前端开发没什么太大关系,当然因为nodejs的原因可能感觉npm会亲切一些,不过终归不是针对客户端的包管理工作,所以Bower的出现确实让人眼前一亮 ...

随机推荐

  1. nodejs express下使用redis管理session

    Session实现原理 实现请求身份验证的方式很多,其中一种广泛接受的方式是使用服务器端产生的Session ID结合浏览器的Cookie实现对Session的管理,一般来说包括以下4个步骤: 服务器 ...

  2. 移动端使用让图片或者div垂直居中

    ._limgMIiddle{ /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /* Safar ...

  3. Apache JMeter安装

    Apache JMeter安装说明 1.       安装环境要求: Java版本 JMeter要求充分满足JVM1.3或更高. 操作系统 JMeter可以在当前任何一个已经部署了Java的操作系统上 ...

  4. TinyFrame升级之一:框架概览

    由于之前的TinyFrame多于简单,并且只是说明原理,并无成型的框架出来,所以这次我把之前的知识进行了汇总,然后做出了这一版的TinyFrame框架. 整个框架的结构如下: TinyFrame.Da ...

  5. 【译】用boosting构建简单的目标分类器

    用boosting构建简单的目标分类器 原文 boosting提供了一个简单的框架,用来构建鲁棒性的目标检测算法.这里提供了必要的函数来实现它:100% MATLAB实现,作为教学工具希望让它简单易得 ...

  6. C++11在时空性能方面的改进

    C++11在时空性能方面的改进 这篇我们聊聊C++11在时间和空间上的改进点: 主要包括以下方面: 新增的高效容器:array.forward_list以及unordered containers: ...

  7. ural 1306. Sequence Median

    1306. Sequence Median Time limit: 1.0 secondMemory limit: 1 MBLanguage limit: C, C++, Pascal Given a ...

  8. Linux下CPU占用率高分析方法

    一般解决方法是通过top命令找出消耗资源高的线程id,利用strace命令查看该线程所有系统调用1. 通过top命令找到可疑进程PID top - 09:37:18 up 70 days, 16:29 ...

  9. VIM编辑器常用功能整理笔记

    vim编辑器 vi : visual Inertface 可视化接口 vim : vi improved 扩展版 语法着色 模式化编辑器: 编辑模式(命令模式): 默认模式 输入模式: 末行模式: 等 ...

  10. bzoj2431:[HAOI2009]逆序对数列

    单组数据比51nod的那道题还弱...而且连优化都不用了.. #include<cstdio> #include<cstring> #include<cctype> ...