Adds gulp operations to VS Code extension commands. Closes #422 (#480)

Added new VSCode commands to perform gulp operations from the command
palette.


## 🎯 Aim
The aim is to add support for every gulp task to the extension commands.

Currently we can only run bundle, package, and publish. I have added,
possibility to run build, clean, serve, test, trust self signed
developer certificate, deploy project assets to azure storage gulp
tasks.

## 📷 Result

Marked in orange are the available extension commands after the change


![image](https://github.com/user-attachments/assets/26cc06d3-894c-44d4-9190-7d1e6df30873)



![image](https://github.com/user-attachments/assets/e4be6c40-257e-4b6b-9705-715aa0c8d3e8)


## ✅ What was done

Added the missing commands in the ```package.json``` file as below, 


![image](https://github.com/user-attachments/assets/e281dcf7-24c4-4fc1-a883-67447dd969f6)

Also, to execute terminal commands such as ```gulp clean``` , ```gulp
build```, ```gulp test```, ```gulp trust-dev-cert```, ```gulp
deploy-azure-storage```, `Registered and activated these commands in the
```extensions.ts``` as below.


![image](https://github.com/user-attachments/assets/a9b04fbb-2c85-4ae2-ba00-c31a72485a69)



- [] not done
- [X] done

## 🔗 Related issue
Closes: #422

Author: NishkalankBezawada

package.json

@@ -784,6 +784,42 @@
 				"title": "Publish",
 				"category": "SPFx Toolkit",
 				"icon": "$(sync)"
+			},
+			{
+				"command": "spfx-toolkit.serveProject",
+				"title": "Serve",
+				"category": "SPFx Toolkit",
+				"icon": "$(sync)"
+			},
+			{
+				"command": "spfx-toolkit.cleanProject",
+				"title": "Clean",
+				"category": "SPFx Toolkit",
+				"icon": "$(sync)"
+			},
+			{
+				"command": "spfx-toolkit.buildProject",
+				"title": "Build",
+				"category": "SPFx Toolkit",
+				"icon": "$(sync)"
+			},
+			{
+				"command": "spfx-toolkit.testProject",
+				"title": "Test",
+				"category": "SPFx Toolkit",
+				"icon": "$(sync)"
+			},
+			{
+				"command": "spfx-toolkit.trustDevCert",
+				"title": "Trust self-signed developer certificate",
+				"category": "SPFx Toolkit",
+				"icon": "$(sync)"
+			},
+			{
+				"command": "spfx-toolkit.deployToAzureStorage",
+				"title": "Deploy project assets to Azure Storage",
+				"category": "SPFx Toolkit",
+				"icon": "$(sync)"
 			}
 		],
 		"menus": {

src/constants/Commands.ts

@@ -58,6 +58,21 @@ export const Commands = {
   // Serving
   serveProject: `${EXTENSION_NAME}.serveProject`,
 
+  // Clean
+  cleanProject: `${EXTENSION_NAME}.cleanProject`,
+
+  // Build
+  buildProject: `${EXTENSION_NAME}.buildProject`,
+
+  // Test
+  testProject: `${EXTENSION_NAME}.testProject`,
+
+  // Trust dev cert
+  trustDevCert: `${EXTENSION_NAME}.trustDevCert`,
+
+  // Deploy to Azure Storage
+  deployToAzureStorage: `${EXTENSION_NAME}.deployToAzureStorage`,
+
   // TreeViews
   refreshAppCatalogTreeView: `${EXTENSION_NAME}.refreshAppCatalogTreeView`,
   refreshAccountTreeView: `${EXTENSION_NAME}.refreshAccountTreeView`,

src/panels/CommandPanel.ts

@@ -288,15 +288,15 @@ export class CommandPanel {
 
   private static taskTreeView() {
     const taskCommands: ActionTreeItem[] = [
-      new ActionTreeItem('Build project', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp build'),
+      new ActionTreeItem('Build project', '', { name: 'debug-start', custom: false }, undefined, Commands.buildProject),
       new ActionTreeItem('Bundle project', '', { name: 'debug-start', custom: false }, undefined, Commands.bundleProject),
-      new ActionTreeItem('Clean project', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp clean'),
-      new ActionTreeItem('Deploy project assets to Azure Storage', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp deploy-azure-storage'),
+      new ActionTreeItem('Clean project', '', { name: 'debug-start', custom: false }, undefined, Commands.cleanProject),
+      new ActionTreeItem('Deploy project assets to Azure Storage', '', { name: 'debug-start', custom: false }, undefined, Commands.deployToAzureStorage),
       new ActionTreeItem('Package', '', { name: 'debug-start', custom: false }, undefined, Commands.packageProject),
       new ActionTreeItem('Publish', '', { name: 'debug-start', custom: false }, undefined, Commands.publishProject),
       new ActionTreeItem('Serve', '', { name: 'debug-start', custom: false }, undefined, Commands.serveProject),
-      new ActionTreeItem('Test', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp test'),
-      new ActionTreeItem('Trust self-signed developer certificate', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp trust-dev-cert'),
+      new ActionTreeItem('Test', '', { name: 'debug-start', custom: false }, undefined, Commands.testProject),
+      new ActionTreeItem('Trust self-signed developer certificate', '', { name: 'debug-start', custom: false }, undefined, Commands.trustDevCert),
     ];
 
     window.registerTreeDataProvider('pnp-view-tasks', new ActionTreeDataProvider(taskCommands));

src/services/executeWrappers/TerminalCommandExecuter.ts

@@ -35,6 +35,21 @@ export class TerminalCommandExecuter {
     subscriptions.push(
       commands.registerCommand(Commands.executeTerminalCommand, TerminalCommandExecuter.runCommand)
     );
+    subscriptions.push(
+      commands.registerCommand(Commands.cleanProject, TerminalCommandExecuter.cleanProject)
+    );
+    subscriptions.push(
+      commands.registerCommand(Commands.buildProject, TerminalCommandExecuter.buildProject)
+    );
+    subscriptions.push(
+      commands.registerCommand(Commands.testProject, TerminalCommandExecuter.testProject)
+    );
+    subscriptions.push(
+      commands.registerCommand(Commands.trustDevCert, TerminalCommandExecuter.trustDevCert)
+    );
+    subscriptions.push(
+      commands.registerCommand(Commands.deployToAzureStorage, TerminalCommandExecuter.deployToAzureStorage)
+    );
 
     TerminalCommandExecuter.initShellPath();
   }
@@ -188,6 +203,41 @@ export class TerminalCommandExecuter {
     });
   }
 
+  /**
+   * Cleans the project by executing the Gulp clean command.
+   */
+  private static cleanProject() {
+    commands.executeCommand(Commands.executeTerminalCommand, 'gulp clean');
+  }
+
+  /**
+   * Builds the project by executing the Gulp build command.
+  */
+  private static buildProject() {
+    commands.executeCommand(Commands.executeTerminalCommand, 'gulp build');
+  }
+
+  /**
+   * Tests the project by executing the Gulp test command.
+  */
+  private static testProject() {
+    commands.executeCommand(Commands.executeTerminalCommand, 'gulp test');
+  }
+
+  /**
+   * Trusts the development certificate by executing the Gulp trust-dev-cert command.
+  */
+  private static trustDevCert() {
+    commands.executeCommand(Commands.executeTerminalCommand, 'gulp trust-dev-cert');
+  }
+
+  /**
+   * Deploys to Azure CDN by executing the Gulp deploy-to-azure-storage command.
+  */
+  private static deployToAzureStorage() {
+    commands.executeCommand(Commands.executeTerminalCommand, 'gulp deploy-azure-storage');
+  }
+
   /**
    * Initializes the shell path for executing terminal commands.
    * If the shell path is an object with a `path` property, it sets the `shellPath` to that value.