SharePoint Framework uses various gulp tasks to run its processes during runtime and building client side projects. The tool “gulp” provides a lot of tasks to complete the tasks. We integrate these tasks with SharePoint Framework client side projects. Gulp is so called a Task Runner.

Suggested Topics

What is SharePoint Framework (SPFx)

Future prospects of SharePoint Framework (SPFx)

Required tools and libraries for SharePoint Framework (SPFx) development

Setup Microsoft 365 tenant for SharePoint Framework development

Setup SharePoint Framework client side web part development environment

Build SharePoint client side web part using SharePoint Framework (SPFx) – I

Build SharePoint client side web part using SharePoint Framework (SPFx) – II

Build SharePoint client side web part using SharePoint Framework (SPFx) – III

How to Debug SharePoint Framework Solutions in Visual Studio Code

What is the Developers Point of View on SharePoint Framework

What is Required Toolchain for SharePoint Framework

How to Integrate gulp tasks with SharePoint Framework Toolchain

How to Provision SharePoint assets with solution packages

How to Upgrade SharePoint Framework client side solutions in SharePoint Online

Sometime, we need a custom gulp tasks. Obviously, we can implement custom tasks in gulp package as well.

SharePoint client side development tools use gulp as build process task runner for performing following activities:

1. Bundle and minify JavaScript and CSS files.
2. Run tools to call the bundling and minification tasks before each build.
3. Compile LESS or SASS files to CSS.
4. Compile TypeScript files to JavaScript

You can see list of available tasks available in SharePoint Framework toolchain for your client side project by executing following command:

gulp –tasks

 

 

If you to want add your own custom task in this pipeline and you want that should also be executed while processing of this client side project, you will have to add your task.

Gulp tasks

gulp tasks are defined in gulpfile.js.

You need to define your custom gulp task and register it with SharePoint Framework’s build pipeline. Once it is defined and registered with the pipeline, task will be added to toolchain.

Create custom gulp tasks

You will define custom tasks in gulpfile.js file. Default code in this file defines SharePoint Framework toolchain and the gulp instance of toolchain.

 

 

Custom tasks shall be defined before gulp initialization. Let’s see, how to add custom task?

In the default statement, you can see a constant variable “build” which represents a package. You will create a sub-task and its parent task in the same file gulpfile.js. Let’s move on step by step below and understand below code.

 

Steps

1. Create a sub-task under build. I have taken name of sub-task as “myhelloworld-subtask” and its work is to print a log text message.
2. Create it parent task named as “myhelloworld-task” and passing the reference to sub-task i.e. mysubtask. Now we have a task “myhelloworld-task” with its sub-task “myhelloworld-subtask”
3. Run this task using below command in command prompt in project root directory.

 

 

The command “gulp myhelloworld-task” starts execution targeted as BUILD in DEBUG mode. It starts “myhelloworld-task” and then its sub-task “myhelloworld-subtask”. This sub-task prints a log text message in command prompt as “My Hello World Sub Task!”.

If you run command gulp –tasks, you will see a list of tasks which includes custom parent task “myhelloworld-task” only. It doesn’t include sub-task as it is inside main task.

4. You can also add this custom task to be executed before or after certain available gulp tasks. The following gulp tasks allow you to inject your custom task before or after task:
   1. Generic build task (that consists all the available tasks)
   2. TypeScript task

SharePoint Framework tasks are available in the default build rig which is a collection of tasks defined for a specific purpose. You can access this default rig using the build.rig object and get access to the pre and post task functions:

//execute before the typescript subtask

build.rig.addPreBuildTask(myhelloWorldtask);

// execute after TypeScript task

build.rig.addPostTypescriptTask(myhelloWorldtask);

//execute after all tasks

build.rig.addPostBuildTask(myhelloWorldtask);

5. I want to get custom task executed after Typescript tasks, so I used it as below:
6. Now run the following command in command prompt and you will see your task is also getting executed.

gulp serve

 

What’s next

We have gone through a lot of concepts in SharePoint Framework (SPFx) in past articles. In further articles, we’ll go deep into SharePoint components perspective functionality of SharePoint Framework. We’ll see how to use SharePoint Assets in SharePoint Framework (SPFx) in next set of articles.

 

Thank you for reading…

Please like, share and subscribe!

Hope you enjoyed reading it.

Please don't forget to Share, Follow and Like to get updated with latest posts.

It gives me motivation to share more knowledge with you.

About Author

Satyendra Mishra

Project Management Professional (PMP) and Microsoft certified, motivated, energetic and accomplished Project Manager / Architect with 15+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. I have been fortunate to be a part of over 25+ .Net / SharePoint projects delivery with various companies across different industry sectors. This has provided me a valuable insight and experience especially in successful implementation of SharePoint based solutions.

My experience in Web application implementation includes technology strategy and road-map definition, business and technical requirements identification, governance, platform architecture, solution design, configuration, development, quality assurance, training, post-production support, team lead and overall project delivery along with project management.

Satyendra Mishra holds a B.Tech. in Computer Science & Engineering and PG Diploma in Advance Computing from Center for Development and Advance Computing, Pune, India. He is also a certified Project Management Professional (PMP).

I love to share Project Management Tips and Tricks by writing Blogs in the Project Management India Community. I have written around 300+ articles in the Project Management, .Net, SharePoint and related client side technologies.