How to Integrate gulp tasks with SharePoint Framework

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

 

integrate-toolchain-with-spfx-1

 

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.

 

integrate-toolchain-with-spfx-2

 

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.

 

integrate-toolchain-with-spfx-3

 

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.

 

integrate-toolchain-with-spfx-4

 



 

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.

 

integrate-toolchain-with-spfx-5

 

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.

  1. 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);

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

gulp serve

integrate-toolchain-with-spfx-7

 



 

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!

 



 

About Satyendra Mishra

Satyendra is a Technical Project Manager with 12+ years of experience on Project Management, Microsoft Technologies including ASP.NET, ASP.NET MVC, C#, SharePoint (On premises & Office 365), JavaScript Framework (AngularJS) and related technologies. He is a person with belief, sky is limit for a hard working and dedicated individual. That’s why he devoted himself to field of Software Development and now both are growing with each other. Every year for him turned out to be best year and he received enormous support and love from his companies and his clients from around the world. Now with vast knowledge of software development and its outsourcing process, he decided to move himself into knowledge sharing. Keep a fact in your mind about the comfort level of your clients and this will make you king/queen of your area.
View all posts by Satyendra Mishra →

Leave a Reply

Your email address will not be published. Required fields are marked *