How to use the @microsoft/sp-build-web.subTask function in @microsoft/sp-build-web

'use strict';

const build = require('@microsoft/sp-build-web');
const common = require("@microsoft/sp-build-common");

const originalBundleTask = build.rig.getBundleTask;
build.rig.getBundleTask = function () {
    const originalTask = originalBundleTask.apply(build.rig);
    return common.serial(originalTask, serveInfo);
}

const serveInfo = build.subTask('serve-info', (gulp, config, cb) => {
    var serveTask = config.uniqueTasks.find((task) => {
        return task.name === 'serve' /* SPFx < 1.2.0 */ ||
            task.name === 'spfx-serve' /* SPFx >= 1.2.0 */ ;
    });
    var url = `http${serveTask.taskConfig.https ? 's' : ''}://${serveTask.taskConfig.hostname}:${serveTask.taskConfig.port}/temp/manifests.js`;
    for (var key in config.properties.manifests) {
        var manifest = config.properties.manifests[key];
        if (manifest.componentType !== 'Extension') {
            continue;
        }

        console.log(`${manifest.alias}:`);
        switch (manifest.extensionType) {
            case "ApplicationCustomizer":
                console.log(`?loadSPFX=true&debugManifestsFile=${url}&customActions={"${manifest.id}":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"property":"this is data"}}}`);
                break;

'use strict';

const build = require('@microsoft/sp-build-web');
const common = require("@microsoft/sp-build-common");

const originalBundleTask = build.rig.getBundleTask;
build.rig.getBundleTask = function () {
    const originalTask = originalBundleTask.apply(build.rig);
    return common.serial(originalTask, serveInfo);
}

const serveInfo = build.subTask('serve-info', (gulp, config, cb) => {
    var serveTask = config.uniqueTasks.find((task) => {
        return task.name === 'serve' /* SPFx < 1.2.0 */ ||
            task.name === 'spfx-serve' /* SPFx >= 1.2.0 */ ;
    });
    var url = `http${serveTask.taskConfig.https ? 's' : ''}://${serveTask.taskConfig.hostname}:${serveTask.taskConfig.port}/temp/manifests.js`;
    for (var key in config.properties.manifests) {
        var manifest = config.properties.manifests[key];
        if (manifest.componentType !== 'Extension') {
            continue;
        }

        console.log(`${manifest.alias}:`);
        switch (manifest.extensionType) {
            case "ApplicationCustomizer":
                console.log(`?loadSPFX=true&debugManifestsFile=${url}&customActions={"${manifest.id}":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"prop1":"val1"}}}`);
                break;

}));

        return generatedConfiguration;
    }

});


/**
 * StyleLinter configuration
 * Reference and custom gulp task
 */
const stylelint = require('gulp-stylelint');

/* Stylelinter sub task */
let styleLintSubTask = build.subTask('stylelint', (gulp) => {

    console.log('[stylelint]: By default style lint errors will not break your build. If you want to change this behaviour, modify failAfterError parameter in gulpfile.js.');

    return gulp
        .src('src/**/*.scss')
        .pipe(stylelint({
            failAfterError: false,
            reporters: [{
                formatter: 'string',
                console: true
            }]
        }));
});
/* end sub task */

build.rig.addPreBuildTask(styleLintSubTask);

'use strict';
var fs = require('fs'),
    build = require('@microsoft/sp-build-web');

/**
 * Verifies if the appSettings.json and appSettings.d.ts have the same appSetting keys.
 */
var verifyAppSettings = build.subTask('verify-app-settings', function(gulp, buildConfig, done) {

    // will hold the keys from the appSettings.json file.
    var appSettingsJsKeys = [];

    // will hold the keys from the appSettings.d.ts file.
    var appSettingsTsKeys = [];

    /**
     * Get all appSettings keys from the appSettings.d.ts text in javascript/nodejs array.
     * Pure string operations.
     */
    var getappSettingsTsKeys = function(appSettingsTsSettingsAsText, appSettingsTsKeysArray) {

        var keyEndPos = appSettingsTsSettingsAsText.indexOf(":");

        // end the recursion if no more `:`.

'use strict';

const gulp = require('gulp');
const path = require('path');
const build = require('@microsoft/sp-build-web');

let copyIcons = build.subTask('copy-icons', function (gulp, buildOptions, done) {
    gulp.src('./*.svg')
        .pipe(gulp.dest('./temp/deploy'));
    done();
});
build.rig.addPostBuildTask(copyIcons);

const bundleAnalyzer = require('webpack-bundle-analyzer');

build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    const lastDirName = path.basename(__dirname);
    const dropPath = path.join(__dirname, 'temp', 'stats');
    generatedConfiguration.plugins.push(new bundleAnalyzer.BundleAnalyzerPlugin({
      openAnalyzer: false,
      analyzerMode: 'static',
      reportFilename: path.join(dropPath, `${lastDirName}.stats.html`),

use: [
                            {
                                loader: 'vue-loader',
                                options: {
                                    esModule: true
                                }
                            }]
                    }]
            },
        };

        return merge(config, vueConfig);
    }
});

let copyOtherFiles = build.subTask('copy-other-files', function(gulp, buildOptions, done){
    return gulp.src(['src/**/*.vue', 'src/**/*.scss'])
               .pipe(gulp.dest(buildOptions.libFolder))
});
build.task('copy-other-files', copyOtherFiles);
build.rig.addPostTypescriptTask(copyOtherFiles);

build.initialize(gulp);