Creates one task for bundle & package each. Closes: #386

## 🎯 Aim

Currently there are 2 tasks for bundle & package each. Namely:

Bundle (local)
Bundle (production)
for the bundle task, and:
Package (local)
Package (production)

With this, We achieve to create one task for bundle project. When
clicked on `Bundle project`, a prompt is shown with options `local` and
`production`. Depending on the user selection, the command is executed
in the terminal.

## 📷 Result for Bundle task

Below is for local, executing `gulp bundle`


![Untitled+video+(27)](https://github.com/user-attachments/assets/0dddd61a-8cda-4e8f-a1e6-89690c0e85c0)


Below is for production, executing `gulp bundle --ship`


![Untitled+video+(28)](https://github.com/user-attachments/assets/44081b74-37cb-4d3c-9351-0f3f7f4ac455)

## 📷 Result for Package task

Below is for both Package local and package production, executing `gulp
package-solution` & `gulp package-solution --ship`


![Untitled+video+(30)](https://github.com/user-attachments/assets/502639db-fea0-4891-aefb-4bc458f488c7)


## ✅ What was done

Added a two new methods in `TerminalCommandExecuter` with name
`bundleProject` & `packageProject`, which will execute this.

<img width="511" alt="image"
src="https://github.com/user-attachments/assets/763694f3-3783-4f52-b800-b6526da698e4"
/>


## 🔗 Related issue

> each PR should be linked with a related issue [Remove this line]

Closes: #386

src/constants/Commands.ts

@@ -43,6 +43,12 @@ export const Commands = {
   // Webviews
   samplesGallery: `${EXTENSION_NAME}.samplesGallery`,
 
+  // Bundle
+  bundleProject: `${EXTENSION_NAME}.bundleProject`,
+
+  // Package
+  packageProject: `${EXTENSION_NAME}.packageProject`,
+
   // Serving
   serveProject: `${EXTENSION_NAME}.serveProject`,
 

src/panels/CommandPanel.ts

@@ -285,12 +285,10 @@ 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('Bundle project (local)', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp bundle'),
-      new ActionTreeItem('Bundle project (production)', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp bundle --ship'),
+      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('Package (local)', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp package-solution'),
-      new ActionTreeItem('Package (production)', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp package-solution --ship'),
+      new ActionTreeItem('Package', '', { name: 'debug-start', custom: false }, undefined, Commands.packageProject),
       new ActionTreeItem('Serve', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp serve'),
       new ActionTreeItem('Serve (nobrowser)', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp serve --nobrowser'),
       new ActionTreeItem('Serve from configuration', '', { name: 'debug-start', custom: false }, undefined, Commands.serveProject),

src/services/executeWrappers/TerminalCommandExecuter.ts

@@ -22,6 +22,12 @@ export class TerminalCommandExecuter {
     subscriptions.push(
       commands.registerCommand(Commands.serveProject, TerminalCommandExecuter.serveProject)
     );
+    subscriptions.push(
+      commands.registerCommand(Commands.bundleProject, TerminalCommandExecuter.bundleProject)
+    );
+    subscriptions.push(
+      commands.registerCommand(Commands.packageProject, TerminalCommandExecuter.packageProject)
+    );
     subscriptions.push(
       commands.registerCommand(Commands.executeTerminalCommand, TerminalCommandExecuter.runCommand)
     );
@@ -93,6 +99,39 @@ export class TerminalCommandExecuter {
     commands.executeCommand(Commands.executeTerminalCommand, `gulp serve --config=${answer}`);
   }
 
+  /**
+   * Bundles the project based on the environment type selected by the user.
+   */
+  public static async bundleProject() {
+    const answer = await TerminalCommandExecuter.environmentTypePrompt();
+
+    if (answer) {
+      commands.executeCommand(Commands.executeTerminalCommand, `gulp bundle${answer === 'local' ? '' : ' --ship'}`);
+    }
+  }
+
+  /**
+   * Prompts the user to select an environment type and executes the appropriate
+   * Gulp command to package the project based on the user's selection.
+   */
+  public static async packageProject() {
+    const answer = await TerminalCommandExecuter.environmentTypePrompt();
+
+    if (answer) {
+      commands.executeCommand(Commands.executeTerminalCommand, `gulp package-solution${answer === 'local' ? '' : ' --ship'}`);
+    }
+  }
+
+  /**
+   * Prompts the user to select the target environment type.
+   */
+  private static async environmentTypePrompt(): Promise<string | undefined> {
+    return await window.showQuickPick(['local', 'production'], {
+      title: 'Select the target environment',
+      ignoreFocusOut: true
+    });
+  }
+
   /**
    * 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.