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!

 



 

 

THREE QUERIES offers easy access to information about SharePoint and associated technologies, project management, agile and scrum methodologies that helps developers, administrators, architects, technical managers, business analysts and end users. It has grown from there. We provide an important knowledge base for those involved in managing, architecture and developing software projects of all kinds. With weekly/daily exclusive updates, we keep you in touch with the latest business, management, technology 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

About Satyendra Mishra

Microsoft certified, motivated, energetic and accomplished SharePoint Consultant and Architect with 13+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. He has been fortunate to be a part of over 20+ Web/Mobile/Software SharePoint and .Net projects delivery with various companies across different industry sectors. This has provided him a valuable insight and experience especially in successful implementation of technology solutions. Having very strong System Architecture, Technological, Management & Analytical Skills, Knowledge of Office 365, SharePoint, .Net, JavaScript, React, Angular, Azure, SQL. In 2016, he decided to start sharing the knowledge back to society in the form for content writing and blogging.
View all posts by Satyendra Mishra →

Leave a Reply

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