Office 365 – SPFx – Introduction to gulp

In recent weeks I wrote quite a few articles about SPFx. During the build process of the SPFx web parts there have been quite a few moments where I’ve been supplying the gulp commands. This post will give you a further introduction of gulp.

Within the SPFx framework I’ve been using the following:

• gulp serve
• gulp bundle
• gulp trust-dev-cert
• gulp package-solution
• gulp deploy-azure-storage

But where do these commands come from?

In this post I’m going through the basics of gulp as it is used within the SPFx project.

So I’m starting with the package solution.

So from the comments I can see that a gulpfile.js is used:

C:\Workspace…\gulpfile.js

[code lang=text]
‘use strict’;

const gulp = require(‘gulp’);
const build = require(‘@microsoft/sp-build-web’);

build.initialize(gulp);
[/code]

Ok, so we’re using the sp-build-web module and then a method initialize is called.

First I’m having a look at the index.d.ts file that is found in the sp-build-web.

[code lang=text]
export * from ‘@microsoft/sp-build-common’;
export * from ‘@microsoft/gulp-core-build-sass’;
export * from ‘@microsoft/gulp-core-build-serve’;
export * from ‘@microsoft/gulp-core-build-webpack’;
export * from ‘@microsoft/gulp-core-build-karma’;
export * from ‘@microsoft/sp-build-core-tasks’;
export * from ‘./SPWebBuildRig’;
export * from ‘./WebBuildRigConstants’;
import { SPWebBuildRig } from ‘./SPWebBuildRig’;
import * as gulp from ‘gulp’;
export declare const rig: SPWebBuildRig;
export declare const initialize: (gulp: gulp.Gulp) => SPWebBuildRig;
[/code]

The last line points me towards the initialize method of SPWebBuildRig which can be found in the ./SPWebBuildRig.d.ts and matching SPWebBuildRig.js file.

This is where we can find a getYargs method which is called by the parent class’s initialize of SPWebBuildRig:

[code lang=text]
SPWebBuildRig.prototype.getYargs = function () {
// tslint:disable:max-line-length
return _super.prototype.getYargs.call(this)
.option(‘debug’, {
describe: ‘runs tests in unit mode’
})
.command(WebBuildRigConstants_1.WebBuildRigConstants.tasks.bundle, ‘build, localize, and bundle the project’)
.command(WebBuildRigConstants_1.WebBuildRigConstants.tasks.deployAzureStorage, ‘upload the assets to a development CDN’)
.command(WebBuildRigConstants_1.WebBuildRigConstants.tasks.packageSolution, ‘package the project into a SPAPP’)
.command(WebBuildRigConstants_1.WebBuildRigConstants.tasks.test, ‘build, localize, and bundle the project and run tests, and verify the coverage’)
.command(WebBuildRigConstants_1.WebBuildRigConstants.tasks.serve, ‘build and bundle the project and run the development server’)
.command(WebBuildRigConstants_1.WebBuildRigConstants.tasks.devDeploy, ‘deploy the current project to a development Azure CDN for sharing builds with colleagues.’)
.command(WebBuildRigConstants_1.WebBuildRigConstants.tasks.trustDevCert, ‘generates and trusts a development certificate if one isn\’t already present’)
.command(WebBuildRigConstants_1.WebBuildRigConstants.tasks.untrustDevCert, ‘untrusts and deletes the development certificate if it exists’)
.command(‘default’, ‘equivalent to bundle and test’);
// tslint:enable:max-line-length
};
[/code]

Ok, so there are a few more commands.

Time to have a look at the WebBuildingRigContants.js file:

[code lang=text]
test: ‘test’,
bundle: ‘bundle’,
deployAzureStorage: ‘deploy-azure-storage’,
packageSolution: ‘package-solution’,
serve: ‘serve’,
devDeploy: ‘dev-deploy’,
trustDevCert: ‘trust-dev-cert’,
untrustDevCert: ‘untrust-dev-cert’
[/code]

These are the command line options that I’ve been using including a few more.

As I’m going back to the package-solution command. By looking through the code I’m now finding the following file:

C:\Workspace…\node_modules\@microsoft\sp-build-core-tasks\lib\packageSolution\PackageSolutionTask.js

where I can find the package solution code that packages my solution.

Pieter Veenstra

Is your business still running on paper trails, sprawling Excel files, or ageing Access databases? There's a better way — and I can show you exactly what it looks like. I'm the Technical Director of Vantage 365, a Microsoft solutions consultancy working with clients across the UK, the Netherlands, and worldwide. For over 30 years I've been turning messy, manual business processes into clean, automated systems that save time, reduce errors, and give teams the visibility they need to make better decisions. SharePains is not just any blog run by a Microsoft MVP. Have you ever used Try-Catch in Power Automate? The original post about Try-Catch in Power Automate can still be found on this site, https://sharepains.com/2018/02/07/try-catch-finally-in-power-automate-flow/ Or have you ever used the Pieter’s method to avoid variables and speed up your flows? https://sharepains.com/2020/03/11/pieters-method-for-advanced-in-flows/ You can contact me using contact@sharepains.com