Introduction
Let us look deeply into the Gulp tasks we use in SharePoint framework solutions.
Gulp helps in automating the manual tasks done in a solution. Say for example, when you create a SharePoint framework solution, you try to test the web parts using the Gulp tasks. The tasks are defined using gulpfile.js present in the SPFx solution.
Some of the most frequently used tasks for SPFx solutions are Gulp serve, Gulp bundle and Gulp package-solution. These tasks are inbuilt for any SPFx solution. Yes! SPFx solution has some of the tasks inbuilt to ease the developer's job.
Let us look at what tasks are available for Gulp in SPFx solutions. It can be easily identified by running the command Gulp --tasks. This command will list down all the options available for Gulp. The following is the snapshot of the default options available under Gulp.
![]()
Gulp Tasks
Let us look at the some of the frequently used tasks listed above.
serve
The serve task is used to test the developed web part locally using workbench files. The task has many subtasks which will run simultaneously to create a local node based server. It will create the temporary files and folders required for testing the functionality. Some of the folders created during the operation are temp and dist. While running, it opens up the local workbench file in the browser for testing. Serve.json present under the config folder has the necessary information for the webpart. The following snapshot shows the sub tasks executed while running Gulp serve.
build
The build task precompiles the code available and it has series of subtasks running similar to serve. This compiles the code and creates the necessary temporary files and folders.
clean
The task will clear the temporary folders and files created in the solution. Some of the folders cleaned up during the process are temp, dist.
bundle
The bundle task will generate the scripts required to run the webpart on the site. The following snapshot shows the files generated.
![]()
package-solution
This task will create the solution package under sharepoint\solution folder required for deploying the webpart to the site. The package-solution.json file is present under config folder, which has basic information about the webpart.
trust-dev-cert
The task is used to install the developer certificates for testing the webparts. This is required before running the Gulp serve task.
Summary
Thus you have seen some of the gulp tasks used in developing, testing and deploying the SharePoint framework solutions.
In the next article, let us see how to create a custom task in the SPFx solution.