Skip to content
SharePoint front-end projects automation and tasks tool-belt
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.



npm version Downloads Build Status FOSSA Status Gitter chat

SharePoint front-end projects automation and tasks tool-belt


The library was designed for usage with SharePoint Push-n-Pull Yeoman generator but can be used as a stand-alone package as well.



npm i sp-build-tasks --save-dev

Integration to the code

// gulpfile.js

const gulp = require('gulp');

new (require('sp-build-tasks').SPBuildTasks)(gulp, {
  privateConf: process.env.PRIVATE_JSON || './config/private.json',
  appConfig: process.env.APP_JSON || './config/app.json',
  taskPath: './tools/tasks'


Parameter Description
privateConf path to credentials config file
appConfig path to application config file
taskPath path to custom gulp tasks folder

App config file

The app config file should be a JSON document with the following schema sp-build-tasks/schema/v1/sppp.json.

The schema represents the following interface:

export interface IAppConfig {
  $schema?: string; // Path to `sp-build-tasks/schema/v1/sppp.json`
  spFolder: string; // SharePoint relative target folder (e.i. `_catalogs/masterpage/contoso`)
  distFolder: string; // Local distribution folder path
  deleteFiles?: boolean; // Delete remote files on local files unlink event
  masterpagePath?: string; // Path to masterpage .hbs in `./src` structure
  masterpage?: any; // masterpage's custom properties passed to hbs template
  masterpageCodeName?: string; // masterpage code name (used for renaming output file)
  platformVersion?: string; // Masterpage platform version (2016, 2013, etc.)
  logoPath?: string; // Path to logo image
  bundleJSLibsFiles?: string[]; // Paths to .js files to bundle together in a single vendor.js
  bundleCSSLibsFiles?: string[]; // Paths to .css files to bundle together in a single vendor.css
  copyAssetsMap?: IAssetMap[]; // Custom static files copy configuration
  customActions?: ICustomActionDefinition[];
  customStyles?: IAssetMap | IAssetMap[]; // Custom styles
  modulePath?: string; // Relative path for module inside dist structure, e.g. `modules/my-module`
  customData?: any; // Optional custom data object that can be used for feeding data to templates
  webpackItemsMap?: Array<{ entry: string; target: string; }>; // Scripts build configuration. Array or entry/target script pairs.
  devtool?: Options.Devtool; // Webpack `devtool` option for development mode, i.e. `eval`

Custom Gulp tasks

// `./build/tasks/example.js`
module.exports = (gulp, $, settings) => {

  // gulp - Gulp object
  // $ - Gulp plugins dynamic loader
  // settings - ISPBuilderSettings object

  gulp.task('example', cb => {
    console.log('Example Gulp Task');

  // ...

or types supported version:


const { customTask } = require('sp-build-tasks');

module.exports = customTask((gulp, $, settings) => {

  gulp.task('example', cb => {
    console.log('Example Gulp Task');


Gulp tasks

Authentication config setup initiation

gulp config

Populates ./config/private.json with credentials options.

Watch and live development


gulp watch

Watch for changes in ./src folder, compiles .ts, .hbs and .scss to ./dist. Watch for changes in ./dist and uploads to target SharePoint folder.

Watch with SharePoint pages live reload

gulp live

Does the same as the watch task. Emits files update to SharePoint live reload client which triggers live pages reload for:

  • JavaScript's updates
  • CSS's updates
  • CEWPs updates
  • Layouts updates
  • Masterpage updates


Publishing ./dist to SharePoint

gulp push

Publishes all ./dist folder content to SharePoint target folder.

Publishing in incremental mode

gulp push --diff

Uploads only files which size is different from those in SharePoint.

Fetching files from SharePoint

gulp pull

Downloads all files and folders from remote SharePoint target to ./dist folder.

Build front-end

gulp build

Compiles front-end to ./dist folder.

Build options

Production build
gulp build --prod

Used with Webpack build.

Build subtasks

A specific subtasks can be provided as gulp build parameters:

Parameter Description
--webpack webpack'ing .ts to single app.js buldle
--css-custom bundling custom css (from .scss)
--copy-assets copying static content
--js-libs bundling JavaScript libraries
--css-libs bundling CSS libraries or custom .css
--masterpage .hbs to .masterpage
--layouts .hbs to .aspx layouts
--webparts compiles .hbs CEWPs
gulp build --prod --webpack --webparts

Starts webparts and webpack tasks, also uses production build configs.


Live reload

gulp live-reload [--install]

Installs live reload client as ScriptLink custom action to SPWeb.

gulp live-reload --uninstall

Retracts live reload custom action client.


gulp masterpage [--install]

Applies custom masterpage and logo to SPWeb.

gulp masterpage --uninstall

Restores default (seattle.masterpage) masterpage.

Custom actions

gulp custom-actions [--install]

Provisions custom actions from app.json settings.

gulp custom-actions --uninstall

Removes custom actions based on project namespace prefix.


FOSSA Status

You can’t perform that action at this time.