Automate SPFx source code backup with gulp

As a developer working on SharePoint framework (SPFx) with Azure DevOps, it would be convenient to have a automation to back up the source code to local sometime. Here is the example to use gulp task. We would use backing up fiels for SPFx webparts or just components folder. You could modify for your own purpose.

To use it, you could run as the following commands.

gulp bakwebparts

gulp bakcom

gulp.task('bakcom', function() {

// copy all files in source/webparts/pubsWebPart/components to C:\PubsBackup\<year>-<month>-<date>-<hour>-<minute>\components

var backupRoot = "C://PubsBackup";

var d = new Date();

var m = Number(d.getMonth()) + 1;

var n = d.getFullYear() + '-' + m.toString() + '-' + d.getDate() + '-' + d.getHours() + '-' + d.getMinutes();

var pubsRoot = backupRoot + '/' + n;

var webparts = pubsRoot + '/webparts';

var pubsWebPart = webparts + '/pubsWebPart';

var component = pubsWebPart + '/components';

console.log("component" + component);

const folders = [

backupRoot,

pubsRoot,

webparts,

pubsWebPart,

component

];

folders.forEach(dir => {

if(!fs.existsSync(dir)) {

fs.mkdirSync(dir);

console.log('📁 folder created:', dir);

}

});

gulp.src('./src/webparts/pubsWebPart/components/*.*').pipe(gulp.dest(component));

});

gulp.task('bakwebparts', function() {

// copy all files in source/webparts/pubsWebPart/components to C:\PubsBackup\<year>-<month>-<date>-<hour>-<minute>\components

var backupRoot = "C://PubsBackup";

var d = new Date();

var m = Number(d.getMonth()) + 1;

var n = d.getFullYear() + '-' + m.toString() + '-' + d.getDate() + '-' + d.getHours() + '-' + d.getMinutes();

var pubsRoot = backupRoot + '/' + n;

var webparts = pubsRoot + '/webparts';

var pubsWebPart = webparts + '/pubsWebPart';

var component = pubsWebPart + '/components';

var loc = pubsWebPart + '/loc';

var services = pubsWebPart + '/services';

console.log("component" + component);

const folders = [

backupRoot,

pubsRoot,

webparts,

pubsWebPart,

component,

loc,

services

];

folders.forEach(dir => {

if(!fs.existsSync(dir)) {

fs.mkdirSync(dir);

console.log('📁 folder created:', dir);

}

});

gulp.src('./src/webparts/pubsWebPart/*.*').pipe(gulp.dest(pubsWebPart));

gulp.src('./src/webparts/pubsWebPart/components/*.*').pipe(gulp.dest(component));

gulp.src('./src/webparts/pubsWebPart/loc/*.*').pipe(gulp.dest(loc));

gulp.src('./src/webparts/pubsWebPart/services/*.*').pipe(gulp.dest(services));

});