Monday, 2 May 2016

Simple bundle, minify and upload JS to SharePoint using Gulp

I recently started playing around with Gulp and was not really impressed until I came across the gulp-spsave plugin. This plugin will let you upload your JS/CSS files directly to SharePoint right from Visual Studio 2015! This meant that I no longer had to manually upload my JS files to SharePoint or use SharePoint Designer to edit my JS/CSS files!

This got me more interested in Gulp and I started exploring how can I further improve my debugging and build workflow with Gulp. After spending some more time, I came up with a basic workflow which will definitely get you interested in Gulp as a SharePoint/Office 365 Developer!

This is a simple workflow which will look for predefined JavaScript files in your Visual Studio 2015 project. If any of your files change, it will be bundled into a single JavaScript file, minified and uploaded to SharePoint.

Here is my project on GitHub:

The plugins used in this demo are:

gulp-concat : Used to bundle js files.

gulp-uglify : Used to minify the js files

gulp-rename : Used to rename the minified file to .min.js

gulp-spsave : Used to upload files to SharePoint

Here is the file structure of my Visual Studio 2015 project. It is a simple ASP.NET project where I have removed all unnecessary files. Since this is a strictly front-end/UI project, you could also open a folder in Visual Studio as described in this StackOverflow post.

The Scripts folder contains the JS files I will be working on. For demo purposes, I have copied the files from the Core.JavaScriptCustomization project in PnP.

The Output folder is where my output files GulpDemo.js and GulpDemo.min.js will be created. These will also be uploaded to SharePoint.

The GulpFile.js is where all my Gulp tasks will be defined. 

The package.json file is where all the NPM packages required for my tasks will be defined. 

So without further ado, here is the code for my Gulp tasks:

After creating your gulp tasks, you can run them from the Task Runner Explorer window in Visual Studio 2015:

After changing the scenario1.js file, I can see that the concat, minify and upload to sp tasks are triggered as well:

Thanks for reading!


anoop said...

Fantastic. Thank you for posting this Vardhaman.

Powered by silas said...

Thanks for share it. I get an error trying to executing this plugin do you have any idea what's going wrong?

[08:57:19] Finished 'upload-to-sp' after 4 ms
[08:57:21] spsave: Error occured:
[08:57:21] spsave: 401 - undefined

[08:57:21] spsave: Stack trace:

[08:57:21] spsave: StatusCodeError: 401 - undefined

Vardhaman Deshpande said...

401 means invalid credentials. Have your entered the correct credentials for your tenant in the "upload-to-sp" task?

Juan said...

Thanks for your support but I have entered my credentials correctly. Do you know other way to prove the connection?

Bas Utz said...

Same problem here. I'm trying to login to my OnPrem 2016 SharePoint and upload the files. VS is on the same machine as SharePoint. Credentials are definetely correct and I also set the domain setting. :-(

Can you verify if that plugin works for OnPremise?

Deepak Trivedi said...

Hi Vard,
In my source code there are around 25 files in a folder and when I am trying to deploy these files in SharePoint style library using a gulp task then it deploys only 16 out of 25 files any idea?
is there any configuration or limitation of max number of files to deploy using gulp task?

Vardhaman Deshpande said...

Hi All,

gulp-spsave is supposed to work on OnPremises SharePoint as well. It has been test on the platforms as mentioned here:

Also, I would suggest you to post in the gitter chat for spsave if you have any questions: