SharePoint Quick Deploy & Build Process Using Node, Gulp & SP Save – Part 2

In this article we’ll pick up where we left off in Part 1 and begin the creation of a gulpfile.js. This file will provide the instructions to our build process. Gulp will be watching our files for changes and then publishing them to our SharePoint site. We are going to start out with monitoring a folder called “Style Library” that will deploy up to “Style Library”.

Creating the gulpfile.js

In Visual Studio Code, under your project folder, select New File

Inside the gulpfile.js we need to add the follow code:

These are going to be the dependencies

var gulp = require("gulp");
var spsave = require("spsave").spsave;
var watch = require("gulp-watch");

Now we’ll add references that are needed by spsave. We’ll create these files after we finish the gulpfile.js

var creds = require("./creds.js");
var coreOptions = require("./coreOptions.js");

Here we’ll add some variables to our folders & paths.

The paths variable will hold the locations for our local development files

The fileOptions object is more specific for spsave

var paths = {
  styleLibrary: ["./src/Style Library/**/*"]
};

var fileOptions = {
  styleLibrary: {
    folder: "Style Library", //folder inside SharePoint
    glob: paths.styleLibrary, //local folder
    base: "Style Library" //this remove the 'Style Library' from the url
  }
};

Now is our only function which pushes files into SharePoint given the configuration, credentials, and the file mapping from local to SharePoint

var copyToSharePoint = function(fileOptions) {
  return spsave(coreOptions, creds, fileOptions);
};

Next we need to define a set of tasks, which I will explain from bottom up.

• We create a task call “styleLibrary” which will call the copyToSharePoint function passing the fileOptions for the Style Library.
• We also define a “deploy” task which calls the “styleLibrary” task. When we define more functionality to “deploy” we will add those here to the array.
• Lastly we define the “default” task which will be our “watch” task.

gulp.task("default", ["watch"]);

gulp.task("deploy", ["styleLibrary"]);

gulp.task("styleLibrary", function() {
  return copyToSharePoint(fileOptions.styleLibrary);
});

For the final task we will define a “watch” that will monitor the Style Library and call copyToSharePoint using the specified options

gulp.task("watch", function() {
  watch(paths.styleLibrary).on("change", function(file) {
    var changedFileOptions = fileOptions.styleLibrary;
    changedFileOptions.glob = file;
    copyToSharePoint(changedFileOptions);
  });
});

Creating creds.js file

In Visual Studio Code, under your project folder, select New File

Inside the creds.js we need to add the follow code:

Here you will set the user account & password that spsave will use to upload the files

module.exports = {
    username: "{USER}@onmicrosoft.com",
    password: "{PASSWORD}"
};

Creating coreOptions.js file

In Visual Studio Code, under your project folder, select New File

Inside the coreOptions.js we need to add the follow code:

You will need to set the parameters like the Site Url, whether you have check in enabled and what type also whether or not you want notifications for success/failures upon uploading.

module.exports = {
    siteUrl: "https://{YOUR-SITE}.sharepoint.com",
    notification: true,
    checkin: true,
    checkinType: 1 //0 minor, 1 major, 2 overwrite
};

Creating the Folder Structure

Next we need to create new folders that we’ve mapped in the gulpfile.js

In Visual Studio Code, under your project folder, select New Folder

Under here we will create a src/Style Library folder. This folder is defined in our gulpfile.js and will be set to be watched for changes.

Download these files here: sample-project-step2

Running the task

At this point it’s important just to make sure everything is working. We will be running those gulp tasks that were created in the previous steps.

From the terminal window you can run the following command:

gulp

You don’t need to specify anything else because we’ve set the default command to watch. Below you will see the expected output.

Now let’s go ahead and create a test.txt file inside the Style Library folder. Inside the test.txt type any message.

If everything is correct then you will see the test.txt successfully get pushed into the target site in the specified location. Congratulations! you are now seeing the potential power of working on your desktop and remotely pushing files. This is just the tip of the iceberg as you can do much more however everything now relies on this foundation we’ve established to work properly.

If you receive an error message, please take a deep breath and read the message from the top down. It’s likely that your username and password is not 100% correct or the site url is wrong.

In the next article we will extend this file to upload additional types of assets such as: page layouts, master pages, publishing images.

Stay tuned for Part 3…