Gulp Remove All Build Files and Run Again

Many projects that utilize gulp as the build system mostly implement a particular gulp job that is proper name 'dist' for distribution. This task package and bundle everything for production utilise.

Can we take a gulp task like this in SPFx too? Yes, we can accept this too. First, permit the states take a look at the steps you lot need to do when you lot like to create a clean 'sppkg' file in the SharePoint Framework.

Build a clean bundle

The steps to build a make clean package are:

1. gulp clean – removes all files from previous builds
2. gulp bundle – creates a new build and writes manifest to the temp folder
3. gulp package-solution – creates the 'sppkg' file

The 'build' task is not required because 'parcel' runs a build past default. The solution file created after these three tasks is a debug or development parcel that references the local workbench still.

To create a parcel for production the '–ship' or '–production' are required parameters.

On task that does that all

In Gulp, yous can create a new task that relies on other existing tasks. You tin define other tasks as so-called dependencies that demand to run showtime.

          gulp.task('dist', ['clean', 'bundle', 'packet-solution'], () => {    // do goose egg in here or additional steps })                  

The kickoff argument is the name of the task. In this case 'dist'. The second argument defines the order of dependent gulp tasks. In other words, it first cleans everything up, executes bundle and then creates a package for the solution for united states. The mission is accomplishing right? Well not so fast.

Problem when executing the gulp task this way.

When y'all execute the task similar this, you get some error messages. The reason for this is that some subtasks get chosen past clean, packet or package-solution, and this causes this trouble. It is not a problem of the build rig created by Microsoft effectually the SPFx job. Information technology is a problem with the current gulp version (three.9.1) the SharePoint Framework uses.

If SPFx uses gulp version 4.0.0 someday, the trouble is piece of cake to solve considering this version has a fashion ameliorate handling if tasks should run parallel or serial.

          gulp.task('dist', gulp.series('make clean', 'bundle', 'packet-solution'), () => {    // do goose egg in hither or additional steps })                  

Passing the gulp tasks inside 'gulp.serial' does the trick there and make certain that one chore gets executed after another. (Gulp four – new chore execution)

Solve this issue in Gulp three.9.one

This result is non specific to the SharePoint framework. It is more than a general problem with task handling in older versions of gulp. To solve information technology someone wrote a gulp plugin named 'gulp-sequence' that does the trick.

The first step is to install this npm package to your project.

          npm install gulp-sequence --save-dev                  

The second step is to reference this package in the gulp file and this reference right after 'gulp' and 'sp-build-web'.

          const gulp = crave('gulp'); const build = require('@microsoft/sp-build-web'); const gulpSequence = crave('gulp-sequence');                  

The tertiary footstep is to alter the gulp chore to use the gulp sequence.

          gulp.task('dist', gulpSequence('clean', 'packet', 'packet-solution'), () => {    // practice nothing in here or boosted steps });                  

Now everything is was executed in the right way, and the result is a new clean 'sppkg' file. The build target is notwithstanding 'DEBUG' instead of production. You can still pass in the '–transport' or '–production' options which creates a package ready to ship to your customer.

SPFx parcel after running the dist gulp task

E'er send on 'gulp dist'

It would brand sense to use this distribution task merely for production releases. This way y'all don't take to think about additional parameters like '–ship' or '–production'. NodeJS stores all command line arguments in the 'process' variable named and a belongings named 'argv'. If it should automatically use the '–transport' argument too, we need to add it to the drove of arguments.

          'use strict'; // check if gulp dist was called if(process.argv.indexOf('dist') !== -1){    // add send options to control call   process.argv.button('--ship');  }                  

The first thing is to check if 'dist' was ready on the arguments because we won't accept the '–ship' option used all the time. 'argv' stores everything in an assortment to we need to button information technology just in. Finally, nosotros have new gulp task that combines all required step in one single control.

Come across it alive in activity

baumannapidention39.blogspot.com

Source: https://n8d.at/gulp-dist-in-spfx-one-command-to-create-a-clean-solution-package

Share this post