Public 中的文件 ASP.NET 5

Question

我正在尝试 ASP.NET 5 (vNext)。为此，我下载了 Visual Studio 2015 RC。我创建了一个新的 ASP.NET Web 应用程序。然后，在下一个对话框中我选择了 "Empty"。从那里我添加了一个基本控制器和一个基本视图。

我想添加 bower 并引用 Zurb Foundation。但是，我不确定该怎么做。我添加了 bower.json 和 .bowerrc 文件。传统上，我会将我的 bower 包安装在名为 "libraries" 的目录中。我是这样配置的：

.bowerrc

{
  "directory" : "/public/libraries"
}

然后，在我看来，我的代码看起来像这样：

<link rel="stylesheet" src="~/public/libraries/foundation/foundation.min.css" />

我可以看到，当我运行凉亭时，我实际上正在下载库，它们被放置在 /public/libraries 中。但是，当我部署它时，似乎出现了问题。看起来部署正在从 wwwroot 获取运行。但是，我不确定如何处理

通过 bower 加载的客户端包
我需要我的应用程序使用的资源（即图像、css、javascript、字体等）。

我需要做什么才能访问静态文件 a) 在开发期间似乎使用典型的文件结构和 b) 在部署期间这些东西似乎运行来自 wwwroot？

Answer 1

在开发和制作过程中，需要在webroot if you have it defined. You can do this by gulp or grunt task. See here下面放一些东西作为例子。

假设您有以下结构：

└───wwwroot
    ├───js
    │   └───foo.js
    │   └───bar.js

您可以通过以下方式与他们联系：

 <link rel="stylesheet" src="~/js/bar.js" />
 <link rel="stylesheet" src="~/js/foo.js" />

Answer 2

您不应在视图中引用 Bower 依赖项的位置，而应引用 wwwroot 中的相对路径。

为了了解它的适用性，我建议在 VS 2015 RC 中使用 ASP.NET 5 网页模板创建一个新项目。

在 package.json 中列出了您的工具依赖项（由 npm 解决）。默认项目 gulp 的通知包含在此处。 Gulp 是默认的任务运行器，但您可以使用任何您喜欢的任务运行器。按照惯例，Bower 依赖项在 bower.config.

中定义

按照惯例，Bower 依赖项的位置 bower_components 项目根。

如果您查看 gulpfile.js，您会看到它将依赖项从 bower_compontents 复制到项目 webroot 的 /lib（默认为 /wwwroot）。

在视图 _Layout.cshtml 中，您会看到对库的引用是 ~/lib 而不是 /bower_components.

@inject IOptions<AppSettings> AppSettings
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewBag.Title - @AppSettings.Options.SiteTitle</title>

        <environment names="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
            <link rel="stylesheet" href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css" />
            <link rel="stylesheet" href="~/css/site.css" />
        </environment>
        <environment names="Staging,Production">
            <link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/css/bootstrap.min.css"
                  asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
                  asp-fallback-test-class="hidden" asp-fallback-test-property="visibility" asp-fallback-test-value="hidden" />
            <link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap-touch-carousel/0.8.0/css/bootstrap-touch-carousel.css"
                  asp-fallback-href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css"
                  asp-fallback-test-class="carousel-caption" asp-fallback-test-property="display" asp-fallback-test-value="none" />
            <link rel="stylesheet" href="~/css/site.css" />
        </environment>
    </head>

总而言之：

在 bower.config 中定义客户端依赖项（或使用一些其他包管理器）
使用 gulp 脚本来管理任务（复制、缩小等）。
仅在视图中引用 webroot 中的位置（使用 ~ 相对路径）。
当您 build/publish 所有依赖项都应该在部署之前解决到服务器。

Public 中的文件 ASP.NET 5

Public Files in ASP.NET 5

asp.net

asp.net-core