[SPFx] Extending Gulp and running tasks in series (or in parallel)

Posted 22 February 2017 12:00 AM by Luis Máñez, SharePoint and Cloud Solution Architect @ ClearPeople

As you may already know, the new SharePoint framework uses Gulp for all the “compilation” tasks: bundle JavaScript files, generate the package file, etc. However, when we have to create our own Gulp tasks, it doesn’t follow the “normal” mechanism of Gulp, so we can’t just add a new “Task” in the “Gulpfile.js”:

gulp1

To add a new custom Gulp task, we must go through the SPFx build system, which is defined in the package “@microsoft/sp-build-web”

gulp2

gulp3
The build object allows us to call a function “task” and set the definition of our task. It would be something similar to this:

gulp4

However, imagine that we just want to execute a couple of Tasks, but sequentially. Then, we must use the function “serial” of the build object. The following code snippet runs the tasks “task-1” and “task-2” together and sequentially:


var task1 = build.task("task-1", {
            execute: (config) => {
                        console.log("Fist step");
                        return new Promise((resolve, reject) => {
                                    const deployFolder = require('./config/prepare-deploy.json');
                                    const folderLocation = `./${deployFolder.deployCdnPath}/**/*.js`;
                                    return gulp.src(folderLocation)
                                    .on('finish', resolve);
                        });
            }
});

var task2 = build.task("task-2", {
            execute: (config) => {
                        console.log("Second step");
                        return new Promise((resolve, reject) => {
                                    const deployFolder = require('./config/prepare-deploy.json');
                                    const folderLocation = `./${deployFolder.deployCdnPath}/**/*.js`;
                                    return gulp.src(folderLocation)
                                    .on('finish', resolve);
                        });
            }
});

var tasksSerie = build.serial([task1, task2]);

build.task("tasks-serie", serie);

If we run the task, we will see the expected result:

gulp6

If we want to run the tasks in parallel, the mechanics are the same, but using the function “parallel” of the build.object.

Hope this helps!

Share:

Add your comment

 
 

 

Archive

Tagcloud

Digital Transformation employee engagement staff satisfaction productivity Microsoft Teams Office 365 Yammer cms content management system agile GDPR Microsoft Graph collaboration Microsoft sharepoint 2016 upgrade migration SharePoint Online 2016 Tech Trends Digital Disruption Context marketing marketing SharePoint 2010 SharePoint 2013 TFS Git security kentico Analytics intranet jquery QA Quality Assurance testing digital workspace content management websites Sitecore sitecore marketplace sitecore module cloud Microsoft Cloud Storage digital strategy technical consulting sitecore modules Experience database Sitecore 7 Sitecore 8 support account management customer experience Data Storage windows azure cms integration front end front end development prototype Cloud Storage StorSimple Front-end Development Layout SharePoint 2013 colour palette UI design website design log viewer sitecore cms website Azure big data business-critical sharepoint accessibility android apple chrome clear people clearpeople debug emulator ios mobile testing opera resize adobe desktop flash ie10 internet explorer 10 metro windows 8 bcsp SharePoint Advanced System Reporter reporting framework ControlMode form control master page placeholder publishing console SharePoint 2007 SharePoint error search search results search values software testing testing scenario audit content information architecture retention schedules PowerShell QuickLaunch scripts SharePoint server 2010 business solutions metalogix replication replicator storagepoint stena technet UK Technet picture library slideshow web part RTM released to manufacturing caml caml query MOSS 2007 query infopath