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

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:


'use strict';

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


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.

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;

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:

SPWebBuildRig.prototype.getYargs = function () {
// tslint:disable:max-line-length
.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

Ok, so there are a few more commands.

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

test: 'test',
bundle: 'bundle',
deployAzureStorage: 'deploy-azure-storage',
packageSolution: 'package-solution',
serve: 'serve',
devDeploy: 'dev-deploy',
trustDevCert: 'trust-dev-cert',
untrustDevCert: 'untrust-dev-cert'

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:


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