How to include Gulp generated dist folder in ProjectName.zip package created by the Visual Studio Build step

Question

I have a build definition with the following build steps in the following order:

1. NuGet Installer
2. Npm
3. Gulp
4. Visual Studio Build
5. Azure Web App Deployment

In step 3, Gulp generates a dist folder in my application root. The dist folder contains some subfolders and files. The subfolders themselves can contain other subfolders and files.

In step 4, the Visual Studio Build step creates a <ProjectName>.zip zip file when completed.

The Azure Web App Deployment step then deploys that zip file to my Azure Web App.

How do I include the dist folder in <ProjectName>.zip?

I tried doing two Azure Web App Deployments deploying one zip file at a time in the same build definition but the second Azure Web App Deployment build step wipes whatever was deployed by the first one. Is there a way to tell the second Azure Web App Deployment step to "append" to whatever was deployed by the first Azure Web App Deployment step?

Answer 1

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="14.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <Import Project="..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\build\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props" Condition="Exists('..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\build\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props')" />
  <Import Project="..\packages\Microsoft.Net.Compilers.1.0.0\build\Microsoft.Net.Compilers.props" Condition="Exists('..\packages\Microsoft.Net.Compilers.1.0.0\build\Microsoft.Net.Compilers.props')" />
  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
  ...
  ...
  <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
  <Import Project="$(VSToolsPath)\WebApplications\Microsoft.WebApplication.targets" Condition="'$(VSToolsPath)' != ''" />
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" Condition="false" />
  ...
  ...
  <!-- To modify your build process, add your task inside one of the targets below and uncomment it.
       Other similar extension points exist, see Microsoft.Common.targets.
  <Target Name="BeforeBuild">
  </Target>
  <Target Name="AfterBuild">
  </Target> -->
  <PropertyGroup>
    <CopyAllFilesToSingleFolderForPackageDependsOn>
      CustomCollectFiles;
      $(CopyAllFilesToSingleFolderForPackageDependsOn);
    </CopyAllFilesToSingleFolderForPackageDependsOn>
    <CopyAllFilesToSingleFolderForMsdeployDependsOn>
      CustomCollectFiles;
      $(CopyAllFilesToSingleFolderForPackageDependsOn);
    </CopyAllFilesToSingleFolderForMsdeployDependsOn>
  </PropertyGroup>
  <Target Name="CustomCollectFiles">
    <ItemGroup>
      <_CustomFiles Include="dist\**\*" />
      <FilesForPackagingFromProject  Include="%(_CustomFiles.Identity)">
        <DestinationRelativePath>dist\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
      </FilesForPackagingFromProject>
    </ItemGroup>
  </Target>
</Project>

• The property CopyAllFilesToSingleFolderForPackageDependsOn must come after the import <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" Condition="false" />
• dist\**\* means take the dist folder that is directly underneath web application root
• dist\%(RecursiveDir)%(Filename)%(Extension) means place the dist folder directly underneath the web application root inside of the package

Example package path:

C:\_publish\BuildAgentDemo.zip\Content\C_C\Repos\BuildAgentDemoTest1\BuildAgentDemo\obj\Release\Package\PackageTmp\dist

• BuildAgentDemo.zip is one of the artifacts created by the Web Deploy Package publish profile
• PackageTmp is your web application root
• dist is where your custom folders and files will end up

Answer 2

You can add a custom target in your project file to include the files generated by Gulp. Refer to this question for details: How do you include additional files using VS2010 web deployment packages?

And another way to get the Gulp folder published is enabling the FTP deployment of your Azure Web App. And then you can add a FTP Uploader task after "Azure Web App Deployment" task. Use "Azure Web App Deployment" task to deploy the package generated by VS Build and use "FTP Uploader" task to upload the "dist" folder into Azure Web App. Note: Make sure you unchecked the "Delete old Files" option of the FTP Uploader task.