asp.net-core - 发布 polymer + ASP.NET Core

Question

我是 ASP.NET Core 的忠实粉丝，并且一直关注着它从最初的步骤到在 VS2017 中的集成以及返回到基于 msbuild 的项目系统的演变。我也是 Google Polymer 的忠实粉丝，现在 2.0 版本已接近完成，我想尝试将两者结合起来。

我创建了一个 ASP.NET Core Web Api 项目，它将为 Polymer 前端实现 REST API。然后我将命令行指向 wwwroot 文件夹并执行了

polmyer init 

创建一个应用程序模板，该模板创建一些模板 html 文件和一个包含所有基本依赖项的 Bower_components 目录，全部位于 wwwroot 文件夹中!

我的问题是:

VS2017 有一个发布功能，默认情况下发布 wwwroot 文件夹中的所有内容，但可能允许我排除特定文件或文件夹。另一方面，Polymer CLI 作为构建功能，允许我将 ES6 编译为 ES5，最小化 HTML、CSS、JS 或全部并捆绑文件。如何将两者结合起来，在 VS2017 中提供单击发布体验？

Answer 1

这是我当前的解决方案:

使用 VS2017 创建一个新的 ASP.NET Core Web 应用程序 (.NET Core) 项目。添加 Microsoft.AspNetCore.StaticFiles Nuget 包以便能够提供静态文件。

使用命令行导航到 wwwroot 目录并执行

polymer init

按照向导创建您所需的 polymer 项目类型。

在 VS IDE 中打开 csproj 文件，找到包含 wwwroot 目录作为文件夹的项目组。注释掉这一行并添加两行新行。第一个阻止 VS 复制整个 wwwroot 目录。第二个再次添加 polymer 构建目录，以便我们稍后在复制任务中引用它。

<ItemGroup>
  <!--<Folder Include="wwwroot\" />-->
  <Content Update="wwwroot\**\*" CopyToPublishDirectory="Never" />
  <ClientFiles Include="wwwroot\build\default\**\*" />
</ItemGroup>

(请注意，我在内容节点中使用了更新而不是包含!)

使用以下内容创建一个批处理文件polymer-build.cmd并将其放置在项目根目录中。这将使 polymer 在每次 VS 发布之前构建客户端文件

cd wwwroot
polymer build

在这里您可以添加 --js-compile、--css-minify 等选项。

在csproj文件中创建一个新的目标节点，以便在发布之前调用批处理文件

<Target Name="PolymerBuild" BeforeTargets="Publish">
  <Exec Command="polymer-build.cmd" />
</Target>

最后创建另一个目标节点，并执行复制任务，将polymer build目录复制到wwwroot目录

<Target Name="PolymerPublish" AfterTargets="Publish">
  <Copy SourceFiles="@(ClientFiles)" DestinationFolder="$(PublishUrl)\wwwroot\%(RecursiveDir)" />
</Target>

添加

您可能还想抑制 TypeScript 编译，您可以通过 csproj 执行

<PropertyGroup>
    <TypeScriptCompileBlocked>True</TypeScriptCompileBlocked>
</PropertyGroup>

引用文献:

• https://blogs.msdn.microsoft.com/msbuild/2005/11/07/how-to-recursively-copy-files-using-the-copy-task/
• https://polymer-library.polymer-project.org/3.0/docs/tools/polymer-cli
• Excluding File From Publish Directory in VS 2017 .NET Core Project