Faster SharePoint development with gulp and spsave

I’ve been working with SharePoint for quite a number of years now, and if it’s taught me one important thing - it’s patience. During intranet and branding projects, you found yourself in an endless loop of “code, deploy, wait, wait, wait, test”. You soon get used to this and accept it as the norm, however in the last two years or so Microsoft have been embracing more modern client-side approaches to development. To me, Office Graph and Office Fabric are both powerful examples of things to come - Microsoft provide developers with the building blocks and it’s up to you as to how it’s implemented.

With this approach a much wider ecosystem opens up. One of these tools is gulp, Gulp, a build tool built on Node.js. With the help of other packages, it can do all manner of things such as compiling TypeScript, LESS, bundling and minifying which I won’t cover here.

Getting Started

Install gulp

Install Node.js & gulp, by following the steps here

Fork/Clone the project

The code can be forked/copied from https://www.github.com/tobiaswest83/Faster-SharePoint-Development. please note this does not include a config.json file, please create your own using the sample provided (see below!).

Configure your project

Once that’s done - open a command prompt & navigate to your project folder and type npm install. This will create a folder called node_modules and install all the Node.js modules required. This can take a few minutes, all being well - you should get no errors, as shown below.

npm install

Get Coding

This sample project will:

  • Publish any .css from the CSS folder, to a folder called “CSS” in the Site Assets Library
  • publish any .js file from the JS folder, to a folder called “JS” in the Site Assets Library

The example version of config.json, shown below first needs updating with your tenant details, the gulp task which deploys to SharePoint supports a number of options (including on-premise deployments), which are described on the spsave npm page.

{
    "host": "https://[yourtenant].sharepoint.com/",
    "site": "[site]",
    "username": "[yourusername]",
    "password": "[yourpassword]",
    "jsSource": "js/*.js",
    "jsDest": "SiteAssets/JS",
    "cssSource": "css/*.css",
    "cssDest": "SiteAssets/CSS"
}

Test the gulp task

From a command prompt, and ensuring you’re in the folder where your project exists, type the command gulp. This will execute the default gulp task, and it will create the folders required and upload your files to the Sites Assets library.

Your script output should look similar to the screen below, in addition - you should get a notification on screen telling you the task has completed.

gulp

Using a watch task

The above script is all well and good, if you have alternate CSS and a UserCustom action - you won’t need to go through a full redeployment step in order to test any changes. However, a gulp watch task will speed things up even more!

The idea of a watch task, is that gulp will continue to watch the file system for any changes and run the task to upload it to SharePoint. To do this, run gulp watch, and the update either of the files. If you are looking at the console, you’ll see the task run. You’ll also see your notification, as below (in Windows 10 at least!).

gulp notify

Two important things to note here

  • Once you’ve made your changes, there’s no need to watch your command prompt, just wait for your notification and refresh SharePoint
  • The script uses gulp-cache to ensure only updated files get uploaded when they’re changed, however the first time the task runs it will upload all files in the directory (i.e. build up it’s cache)

Next steps

You can add more files to the JS and CSS folder, and gulp will pick these up for you, or you can add more and more tasks to fit your needs (images and page layouts for example).

Take a look at https://github.com/tobiaswest83/Faster-SharePoint-Development/blob/master/gulpfile.js for how I build the gulp task and use these tasks as templates to build up your development scripts.

Happy coding!