发布 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

按照向导创建所需的聚合物项目类型。

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

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

（请注意，我在内容节点中使用了 Update 而不是 Include！）

创建一个批处理文件polymer-build.cmd，内容如下，放在项目根目录下。这将使聚合物在每个 VS 发布之前构建客户端文件

cd wwwroot
polymer build

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

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

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

最后用复制任务创建另一个目标节点，将聚合物构建目录复制到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

Answer 2

您可以在Vusual Stddio项目的pre-build命令中添加polymer init命令。