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:
- Run tools to call the bundling and minification tasks before each build.
- Compile LESS or SASS files to CSS.
You can see list of available tasks available in SharePoint Framework toolchain for your client side project by executing following command:
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 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.
- 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.
- 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”
- 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.
- 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:
- Generic build task (that consists all the available tasks)
- 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
// execute after TypeScript task
//execute after all tasks
- I want to get custom task executed after Typescript tasks, so I used it as below:
- Now run the following command in command prompt and you will see your task is also getting executed.
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!