发布聚合物 + ASP.NET 核心
Publishing Polymer + ASP.NET Core
我是 ASP.NET Core 的忠实粉丝,并且一直关注它从最初的步骤到在 VS2017 中与 return 集成到基于 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 中获得单击发布体验?
您可以在Vusual Stddio中的项目预构建命令中添加polymer init
命令
这是我目前的解决方案:
使用 VS2017 创建一个新的 ASP.NET 核心 Web 应用程序 (.NET Core) 项目。添加 Microsoft.AspNetCore.StaticFiles Nuget 包以提供静态文件。
使用命令行导航到 wwwroot 目录并执行
polymer init
按照向导创建所需的聚合物项目类型。
在VS中打开csproj文件IDE找到wwwroot目录所在的项目组作为文件夹。注释掉这一行并添加两个新行。第一个阻止 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>
最后创建另一个带有复制任务的目标节点将polymer构建目录复制到wwwroot目录
<Target Name="PolymerPublish" AfterTargets="Publish">
<Copy SourceFiles="@(ClientFiles)" DestinationFolder="$(PublishUrl)\wwwroot\%(RecursiveDir)" />
</Target>
加法
您可能还想抑制 TypeScript 编译,您可以通过
在 csproj 中执行此操作
<PropertyGroup>
<TypeScriptCompileBlocked>True</TypeScriptCompileBlocked>
</PropertyGroup>
参考文献:
我是 ASP.NET Core 的忠实粉丝,并且一直关注它从最初的步骤到在 VS2017 中与 return 集成到基于 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 中获得单击发布体验?
您可以在Vusual Stddio中的项目预构建命令中添加polymer init
命令
这是我目前的解决方案:
使用 VS2017 创建一个新的 ASP.NET 核心 Web 应用程序 (.NET Core) 项目。添加 Microsoft.AspNetCore.StaticFiles Nuget 包以提供静态文件。
使用命令行导航到 wwwroot 目录并执行
polymer init
按照向导创建所需的聚合物项目类型。
在VS中打开csproj文件IDE找到wwwroot目录所在的项目组作为文件夹。注释掉这一行并添加两个新行。第一个阻止 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>
最后创建另一个带有复制任务的目标节点将polymer构建目录复制到wwwroot目录
<Target Name="PolymerPublish" AfterTargets="Publish">
<Copy SourceFiles="@(ClientFiles)" DestinationFolder="$(PublishUrl)\wwwroot\%(RecursiveDir)" />
</Target>
加法
您可能还想抑制 TypeScript 编译,您可以通过
在 csproj 中执行此操作<PropertyGroup>
<TypeScriptCompileBlocked>True</TypeScriptCompileBlocked>
</PropertyGroup>
参考文献: