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

Now we’ll add references that are needed by spsave. We’ll create these files after we finish the gulpfile.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

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

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.

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

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

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.

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:

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…

 

There are no comments.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.