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.

Office 365 - SPFx - Introduction to gulp 1

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.

Office 365 - SPFx - Introduction to gulp 2

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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: