Suggested Articles

What is SharePoint Framework (SPFx)

Future prospects of SharePoint Framework (SPFx)

Required tools and libraries for SharePoint Framework (SPFx) development

Setup Office 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

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.

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!

THREE QUERIES is SharePoint, front-end, back end web technologies and project management resource that helps developers, artchitect and managers at all levels to improve their performance. We provide an important knowledge base for those involved in managing, architecture and developing projects of all kinds. With weekly exclusive updates, we keep you in touch with the latest SharePoint, front-end, back end web technologies and project management thinking.

WE ARE CONNECTED ~ Follow us on social media to get regular updates and opinion on what's happening in the world of SharePoint, front-end, back end web technologies and project management. If you like this article, please share it and follow us at Facebook, Twitter, Instagram, Pinterest and LinkedIn