Move UI Client files to StaticAssets project and refactor build targets

.gitignore

@@ -47,9 +47,6 @@ NDependOut/
 QueryResult.htm
 tools/docfx/
 
-# Ignore rule for clearing out Belle (avoid rebuilding all the time)
-preserve.belle
-
 # Ignore rule for output of generated documentation files from grunt docserve
 /src/Umbraco.Web.UI.Docs/api/
 /src/Umbraco.Web.UI.Docs/package-lock.json
@@ -68,13 +65,10 @@ preserve.belle
 /build/docs.zip
 /build/ui-docs.zip
 /build/csharp-docs.zip
-/src/Umbraco.Cms.StaticAssets/wwwroot/umbraco/
+/src/Umbraco.Cms.StaticAssets/gulpfile.outputPath.js
 
 # Environment specific data
-/src/Umbraco.Web.UI.Client/[Bb]uild/
-/src/Umbraco.Web.UI.Client/[Bb]uild/[Bb]elle/
-/src/Umbraco.Web.UI.Client/src/[Ll]ess/*.css
-/src/Umbraco.Web.UI.Client/TESTS-*.xml
+/src/Umbraco.Cms.StaticAssets/TESTS-*.xml
 /src/Umbraco.Web.UI/wwwroot/[Mm]edia/
 /src/Umbraco.Web.UI/App_Code/
 /src/Umbraco.Web.UI/App_Plugins/

build/azure-pipelines.yml

@@ -60,7 +60,7 @@ stages:
   ###############################################
   - stage: Build
     variables:
-      npm_config_cache: $(Pipeline.Workspace)/.npm_client
+      npm_config_cache: $(Pipeline.Workspace)/.npm_src
     jobs:
       - job: A
         displayName: Build Umbraco CMS
@@ -72,22 +72,13 @@ stages:
             inputs:
               versionSpec: $(nodeVersion)
           - task: Cache@2
-            displayName: Cache node_modules
+            displayName: Cache NPM packages
             inputs:
-              key: '"npm_client" | "$(Agent.OS)" | $(Build.SourcesDirectory)/src/Umbraco.Web.UI.Client/package-lock.json'
+              key: 'npm_src | "$(Agent.OS)" | src/**/package-lock.json, !**/node_modules/**'
               restoreKeys: |
-                "npm_client" | "$(Agent.OS)"
-                "npm_client"
+                npm_src | "$(Agent.OS)"
+                npm_src
               path: $(npm_config_cache)
-          - script: npm ci --no-fund --no-audit --prefer-offline
-            workingDirectory:  src/Umbraco.Web.UI.Client
-            displayName: Run npm ci
-          - task: gulp@0
-            displayName: Run gulp build
-            inputs:
-              gulpFile: src/Umbraco.Web.UI.Client/gulpfile.js
-              targets: coreBuild
-              workingDirectory: src/Umbraco.Web.UI.Client
           - task: UseDotNet@2
             displayName: Use .NET $(dotnetVersion)
             inputs:
@@ -370,7 +361,7 @@ stages:
 
   - stage: E2E
     variables:
-      npm_config_cache: $(Pipeline.Workspace)/.npm_e2e
+      npm_config_cache: $(Pipeline.Workspace)/.npm_tests
     displayName: E2E Tests
     dependsOn: Build
     jobs:
@@ -418,12 +409,12 @@ stages:
             inputs:
               versionSpec: $(nodeVersion)
           - task: Cache@2
-            displayName: Cache node_modules
+            displayName: Cache NPM packages
             inputs:
-              key: '"npm_e2e" | "$(Agent.OS)" | $(Build.SourcesDirectory)/tests/Umbraco.Tests.AcceptanceTest/package-lock.json'
+              key: 'npm_tests | "$(Agent.OS)" | tests/**/package-lock.json, !**/node_modules/**'
               restoreKeys: |
-                "npm_e2e" | "$(Agent.OS)"
-                "npm_e2e"
+                npm_tests | "$(Agent.OS)"
+                npm_tests
               path: $(npm_config_cache)
           - pwsh: |
               New-Item -Path "." -Name ".env" -ItemType "file" -Value "UMBRACO_USER_LOGIN=$(Umbraco__CMS__Unattended__UnattendedUserEmail)

src/Umbraco.Cms.StaticAssets/Umbraco.Cms.StaticAssets.csproj

@@ -4,44 +4,59 @@
     <Description>Contains the static assets needed to run Umbraco CMS.</Description>
     <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
     <StaticWebAssetBasePath>/</StaticWebAssetBasePath>
+    <EnableDefaultContentItems>false</EnableDefaultContentItems>
   </PropertyGroup>
 
   <ItemGroup>
     <FrameworkReference Include="Microsoft.AspNetCore.App" />
+    <SupportedPlatform Include="browser" />
   </ItemGroup>
 
   <ItemGroup>
     <ProjectReference Include="..\Umbraco.Web.BackOffice\Umbraco.Web.BackOffice.csproj" />
     <ProjectReference Include="..\Umbraco.Web.Website\Umbraco.Web.Website.csproj" />
   </ItemGroup>
 
-  <PropertyGroup>
-    <BellePath>$(ProjectDir)wwwroot\umbraco</BellePath>
-  </PropertyGroup>
+  <ItemGroup>
+    <Content Include="umbraco\**" />
+    <Content Include="wwwroot\**" />
+  </ItemGroup>
 
-  <Target Name="BuildBellePreconditions" BeforeTargets="Build">
-    <Message Text="Skip BuildBelle target because UmbracoBuild is '$(UmbracoBuild)' (this is not Visual Studio)" Importance="high" Condition="'$(UmbracoBuild)' != ''" />
-    <Message Text="Skip BuildBelle target because '$(BellePath)' already exists" Importance="high" Condition="Exists('$(BellePath)')" />
-    <Message Text="Call BuildBelle target because UmbracoBuild is empty (this is Visual Studio) and '$(BellePath)' doesn't exist" Importance="high" Condition="'$(UmbracoBuild)' == '' and !Exists('$(BellePath)')" />
-    <CallTarget Targets="BuildBelle" Condition="'$(UmbracoBuild)' == '' and !Exists('$(BellePath)')" />
+  <!-- Build client assets using NPM -->
+  <ItemGroup>
+    <ClientAssetsInputs Include="assets\**;gulp\**;lib\**;src\**;test\**" Exclude="$(DefaultItemExcludes)" />
+  </ItemGroup>
+
+  <Target Name="ClientAssetsRestore" BeforeTargets="DispatchToInnerBuilds" Inputs="package.json;package-lock.json" Outputs="node_modules\.package-lock.json">
+    <Message Text="Restoring NPM packages" Importance="high" />
+    <Exec Command="npm ci --no-fund --no-audit --prefer-offline" />
   </Target>
-
-  <Target Name="BuildBelle">
-    <Exec WorkingDirectory="$(ProjectDir)..\Umbraco.Web.UI.Client\" Command="npm ci --no-fund --no-audit --prefer-offline" />
-    <Exec WorkingDirectory="$(ProjectDir)..\Umbraco.Web.UI.Client\" Command="npm run build:skip-tests" />
+
+  <Target Name="ClientAssetsBuild" DependsOnTargets="ClientAssetsRestore" BeforeTargets="AssignTargetPaths" Inputs="@(ClientAssetsInputs)" Outputs="$(IntermediateOutputPath)clientassetsbuild.complete.txt">
+    <Message Text="Executing NPM build script" Importance="High" />
+    <PropertyGroup>
+      <_ClientAssetsOutputFullPath>$([System.IO.Path]::GetFullPath('$(IntermediateOutputPath)clientassets'))</_ClientAssetsOutputFullPath>
+      <_ClientAssetsOutputFile>$(IntermediateOutputPath)clientassets.build.txt</_ClientAssetsOutputFile>
+    </PropertyGroup>
+    <MakeDir Directories="$(_ClientAssetsOutputFullPath)" />
+    <Exec Command="npm run build:skip-tests -- --no-color --output-path=&quot;$(_ClientAssetsOutputFullPath)&quot;" />
+    <ItemGroup>
+      <_ClientAssetsBuildOutput Include="$(IntermediateOutputPath)clientassets\**"></_ClientAssetsBuildOutput>
+    </ItemGroup>
+    <WriteLinesToFile File="$(_ClientAssetsOutputFile)" Lines="@(_ClientAssetsBuildOutput)" Overwrite="true" />
   </Target>
 
-  <Target Name="CleanBellePreconditions" AfterTargets="Clean" Condition="'$(UmbracoBuild)' == ''">
-    <Message Text="Skip CleanBelle target because '$(BellePath)' doesn't exist" Importance="high" Condition="!Exists('$(BellePath)')" />
-    <Message Text="Skip CleanBelle target because preserve.belle marker file exists" Importance="high" Condition="Exists('$(BellePath)') and Exists('$(SolutionDir)preserve.belle')" />
-    <Message Text="Call CleanBelle target because '$(BellePath)' exists and preserve.belle marker file doesn't exist" Importance="high" Condition="Exists('$(BellePath)') and !Exists('$(SolutionDir)preserve.belle')" />
-    <CallTarget Targets="CleanBelle" Condition="Exists('$(BellePath)') and !Exists('$(SolutionDir)preserve.belle')" />
+  <Target Name="ClientAssetsBuildOutputPath" AfterTargets="ClientAssetsBuild">
+    <WriteLinesToFile File="gulpfile.outputPath.js" Lines="exports.outputPath = '$(IntermediateOutputPath.Replace('\', '/'))clientassets';" Overwrite="true" />
   </Target>
-  
-  <Target Name="CleanBelle">
+
+  <Target Name="DefineClientAssets" AfterTargets="ClientAssetsBuild" DependsOnTargets="ResolveStaticWebAssetsConfiguration">
     <ItemGroup>
-      <BelleLib Include="$(BellePath)" />
+      <FileWrites Include="@(_ClientAssetsBuildOutput)" />
+      <FileWrites Include="$(_ClientAssetsOutputFile)" />
     </ItemGroup>
-    <RemoveDir Directories="@(BelleLib)" />
+    <DefineStaticWebAssets CandidateAssets="@(_ClientAssetsBuildOutput)" SourceId="$(PackageId)" SourceType="Computed" ContentRoot="$(_ClientAssetsOutputFullPath)" BasePath="$(StaticWebAssetBasePath)">
+      <Output TaskParameter="Assets" ItemName="StaticWebAsset" />
+    </DefineStaticWebAssets>
   </Target>
 </Project>

src/Umbraco.Web.UI.Client/gulp/config.js → src/Umbraco.Cms.StaticAssets/gulp/config.js

@@ -91,13 +91,13 @@ module.exports = {
             assets: "./src/assets/**"
         }
     },
-    roots: ["../Umbraco.Cms.StaticAssets/wwwroot/"],
+    roots: ["./wwwroot"],
     targets: {
-        js: "umbraco/js/",
-        lib: "umbraco/lib/",
-        views: "umbraco/views/",
-        less: "umbraco/assets/css/",
-        css: "umbraco/assets/css/",
-        assets: "umbraco/assets/"
+        js: "/umbraco/js/",
+        lib: "/umbraco/lib/",
+        views: "/umbraco/views/",
+        less: "/umbraco/assets/css/",
+        css: "/umbraco/assets/css/",
+        assets: "/umbraco/assets/"
     }
 };

src/Umbraco.Web.UI.Client/gulpfile.js → src/Umbraco.Cms.StaticAssets/gulpfile.js

@@ -25,6 +25,19 @@ const { watchTask } = require('./gulp/tasks/watchTask');
 // set default current compile mode:
 config.compile.current = config.compile.build;
 
+// Set output path
+function getOutputPath() {
+  var argv = require('minimist')(process.argv.slice(2));
+
+  var outputPath = argv['output-path'];
+  if (!outputPath) {
+    outputPath = require('./gulpfile.outputPath.js').outputPath;
+  }
+
+  return outputPath;
+}
+config.roots = [getOutputPath()];
+
 const coreBuild = parallel(dependencies, js, less, css, views);
 
 // ***********************************************************