💡[Feature]: Create one task for bundle & package each (Fix - 386)

README.md

@@ -173,7 +173,23 @@ Sign-in is also required for some actions to work properly like the deploy actio
 
 The extension shows all possible Gulp tasks one may run on an SPFx project. The tasks allow you to clean, bundle, package, serve the project with a single click.
 
-![Gulp Tasks](./assets/images/tasks.png)
+![Gulp Tasks](./assets/images/tasks2.png)
+
+- **gulp bundle**
+
+![Bundle local](./assets/images/bundle-local.gif)
+
+- **gulp bundle --ship**
+
+![Bundle `production`](./assets/images/bundle-production.gif)
+
+- **gulp package-solution** 
+
+![Package local](./assets/images/package-local.gif)
+
+- **gulp package-solution --ship**
+
+![Bundle `production`](./assets/images/package-production.gif)
 
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.4-Gulp-tasks)
 

assets/walkthrough/tasks.md

@@ -15,6 +15,6 @@ deploy-azure-storage - Deploys client-side solution project assets to Azure Stor
 
 SPFx Toolkit VS Code extension shows all possible Gulp tasks one may run on an SPFx project. Don't worry about remembering all the commands, just click on the task you want to run and the extension will do the rest.
 
-![Gulp Tasks](../images/tasks.png)
+![Gulp Tasks](../images/tasks2.png)
 
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.4-Gulp-tasks)

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,34 @@ export class TerminalCommandExecuter {
     commands.executeCommand(Commands.executeTerminalCommand, `gulp serve --config=${answer}`);
   }
 
+  public static async bundleProject() {
+    const tasks = ['local','production'];
+    const answer = await window.showQuickPick(tasks, {
+      title: 'Select the target environment',
+      ignoreFocusOut: true
+    });
+
+    if(!answer) {
+      return;
+    }
+
+    commands.executeCommand(Commands.executeTerminalCommand, answer === 'local' ? 'gulp bundle' : 'gulp bundle --ship');
+  }
+
+  public static async packageProject() {
+    const tasks = ['local','production'];
+    const answer = await window.showQuickPick(tasks, {
+      title: 'Select the target environment',
+      ignoreFocusOut: true
+    });
+
+    if(!answer) {
+      return;
+    }
+
+    commands.executeCommand(Commands.executeTerminalCommand, answer === 'local' ? 'gulp package-solution' : 'gulp package-solution --ship');
+  }
+
   /**
    * 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.