For the past year or so I’ve been developing and building branding assets in Visual Studio Code for my Office 365 projects. Not only just creating and building assets in VS Code but I’ve build out a custom build and deployment process using node, gulp, sp save. I’ve switched from building traditional sandboxes solutions on my SharePoint VM using the full blown Visual Studio, to developing in VS Code on my main desktop continuously build/deploy to my developer tenant. Not only does this save endless hours in the deployment process alone, but the build/testing allows me to instantly see my work with minimal delay.

You don’t have to follow my process verbatim but if you have little experience with Node and using Gulp or other plugins this article can help walk you through what I am doing and how I am using in day to day. This process is most beneficial for me in branding projects where I can quickly develop and deploy branding assets [master pages, css, javascript, page layouts, images]. I can also use this process for deployment of those assets to other environments, like staging or production. I typically use this method in tandem with other methods such as SharePoint Patterns and Practices PnP. Where I use node/gulp/spsave during development and PnP for deployment to production. PnP has higher functionality in the sense you can deploy lists/libraries, custom site columns, content types…. and the node/gulp/spsave really just builds & moves assets. The spsave modules has the ability to upload files into SharePoint with meta data, but it has limitations and I rely on PnP for the initial deployment of assets.

 

New call-to-actionIn this 4 part post I’ll cover how to get your environment setup, setting up the build scripts, using the build scripts, and lastly pairing this with SharePoint PnP. Let’s get started

Part 1 – Installing the Tools & Plugins

This first step will walk through installing all the tools and plugins that I use. If you think you already know this then feel free to jump ahead to Part 2.

Visual Studio Code

In the example I will be using Visual Studio Code, https://code.visualstudio.com/. It’s not mandatory that you use visual studio code. You can use any other web development IDE that you want. I will also be running the build scripts inside the visual studio terminal. If your IDE has a built in terminal you could use that or just use the windows command line.

Installing Node

Browse to the Node.js site and download the latest LTS version. If you have this installed already then skip ahead. What we are doing works on other versions as well.
https://nodejs.org/en/

Installing Gulp

Gulp is the task runner that we will be using to automate our build tasks. If you haven’t use Gulp before it can seem overwhelming. For part 1 all you need to know is that it’s purpose is to perform tasks. Tasks can be almost anything you can think of. For our purpose, our tasks will be copy file to SharePoint. In the next section we’ll go through creating some really basic tasks. By chaining a bunch of really simple tasks we’ll be able to increase our productivity. If you want more information you can visit: https://gulpjs.com/. Okay, so lets get started.

After you’ve install Node.js, open up a command line terminal using the either of the 2 following commands:

Start -> Run -> cmd [enter] or WindowsKey+R -> cmd [enter]

at the command line terminal we will run the following command:

npm install -g gulp

This will install gulp globally within the node.js environment. We install it globally so that our local projects can use it. Leave the command line open for the next couple of steps.

Creating a Project Folder

Before we can continue we need to setup a project folder and initialize a project. From the command line enter the following commands:

cd\
md sample-project
cd sample-project
npm init

The last command will initialize a project. You can pretty much [enter], [enter], [enter] through the file. It’s not really important at this time. This init command will ultimately create a packages.json file. This file will hold all information about the packages that we will be using in our projects.

Launch Visual Studio Code

from the command line terminal enter the following command:

code .

Inside VS Code launch the terminal with the following command:

ctrl-`

From the command line inside VS Code run the following command:

npm install gulp --save-dev

This will reinstall gulp again but locally inside our project folder. You will notice a ‘node_modules’ folder created with some new folders/files in there. You might notice a ton of files and that’s OK. Installing a package installs all the packages that are requirements as well. Lastly the –save-dev will write the dependency into the packages.json file.

Packages.json

After you ran ‘npm init’ in the first few steps it created a packages.json file. This file is used to track the project dependencies. For our purposes we are using this simply as a build tool and not as a packages manager. Npm will handle adding dependencies using –save-dev or –save. Dev dependencies are once that are required to build the project so we will be using that exclusively throughout the articles. The two other primary reasons package dependencies are being tracked in this file: 1) to keep a record of the version of the installed package 2)  when you check code in you don’t commit the node_modules, running ‘npm init’ will downloaded all the packages in the packages.json

Installing gulp-watch

Gulp has the ability to watch for file changes however it has a problem with newly added files. To fix this we are going to use gulp-watch to watch for new created files without having to stop/start gulp.

from the command line terminal enter the following commands:

npm install gulp-watch --save-dev

Installing spsave

spsave is an amazing module for node that allows us to upload files into SharePoint. That might not seem impressive but it handles all the funky stuff for us, like authentication, meta data, and various library properties [check in/out]. It does exposes an easy way for us to set our configuration and the away it goes sending your files from your desktop development environment into SharePoint Online. You can visit the website for more specific settings that what we’ll cover here. https://www.npmjs.com/package/spsave.

from the command line terminal enter the following commands:

npm install spsave --save-dev

At this point we’ve installed everything that we need in order to start configuring Gulp. In the next article we’ll walk through the steps of creating our project structure and a gulpfile.js.

Stay tuned for Part 2…

About the Author

Developer, Designer, Thinker, Problem Solver, Office Servers and Services MVP, & Collaboration Director @ SoHo Dragon.

View Articles