如何在构建 ASP.NET Core 之前运行特定的 NPM 命令？答案

【问题标题】：How do I run a specific NPM command before build in ASP.NET Core?如何在构建 ASP.NET Core 之前运行特定的 NPM 命令？
【发布时间】：2020-01-28 00:31:52
【问题描述】：

我正在尝试在我的 ASP.NET Core 应用程序中为 Angular 运行特定的 NPM 命令。 NPM 没什么特别的，它只是准备一些文件。

如何在每次构建 ASP.NET Core 之前自动运行 NPM 脚本？

Angular 应用程序位于 ClientApp 文件夹中，其中包含 package.json。

【问题讨论】：

如果您使用默认的 Angular SPA 模板，它应该附带在您运行它时（即在构建之前）执行的任务设置
docs.npmjs.com/misc/scripts#hook-scripts
您使用的是 Visual Studio（不是 Code）还是其他东西？如果是这样，您可能应该查看预构建事件。
@A.Chiesa 是的，我使用 Visual Studio。

标签： asp.net angular asp.net-core npm single-page-application

【解决方案1】：

如果您使用默认的 Angular SPA 模板，它应该附带在您运行它时（即在构建之前）执行的任务设置。

来自默认的 Angular SPA 模板：

<PropertyGroup>
    <SpaRoot>ClientApp\</SpaRoot>
</PropertyGroup>

<ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
</ItemGroup>

<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
</Target>

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
        <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
        <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
        <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </ResolvedFileToPublish>
</ItemGroup>

【讨论】：

【解决方案2】：

您可以将Target 添加到您的.csproj 文件中，以便在某些步骤执行脚本。例如，以下将在构建服务器应用程序之前运行已安装的gulp.cmd：

<Target Name="RunGulp" BeforeTargets="Build">
  <Exec Command="node_modules\.bin\gulp.cmd" />
</Target>

【讨论】：