HomeDeveloppementSpeedup Javascript Development (when using Content or Script Editor)

Speedup Javascript Development (when using Content or Script Editor)

Creating webpart and script editor is a quick (dirty J) way to deploy a component in any SharePoint or Office 365 version.

To optimize this development process, version the code in git/tfs and fasten the deployment, you can use gulp watch method inspired from Wictor Wilen.

I got this working thanks to my colleague Max (twitter)

Though the recommended approach for non-SharePoint 2016 (feature pack 2, which includes spfx webpart) environment is to create a typescript webpart, to allow easier migration to SPFX in future.

[youtube https://www.youtube.com/watch?v=0GTVclnt7wg&w=560&h=315]

—> Click for the demonstration

Before ?

Instead of deploying a javascript to style library manually or coding from sharepoint designer, you can develop from your favorite IDE (mine is visual studio code) and auto push your change to a library (style library). You code can then be versioned since the files are local (using GIT or TFS).

After !

Using gulp watch command, each time you save a file on your local, it will push to the configured sharepoint environment. You save time and ensure your code is versioned locally

How to ?

  1. Download this Github repository
  2. Install node JS on your machine
  3. From a powershell command or the integrated visual studio code terminal, run npm init
  4. Copy those dependencies to package.json
"dependencies": {

"gulp": "^3.9.1",

"gulp-clean": "^0.3.2",

"gulp-plumber": "^1.1.0",

"gulp-spsync-creds": "^2.2.6"

}
  1. Install dependencies
npm install --save
  1. Copy the installation files from InstallationFiles folder to your solution, for info the package contains
  2. Configure config.json * Inform your site url, credentials (without domain) * specify location : style library/libtest (subfolder) * publish the file or not ?

Usage

  1. Push new files files to style library immediately. It will create sulbfolder under libtest folder by it self
gulp

B) Watch changes and push to style library

Gulp watch

C) if you specified published : false in config.json, it wont get publish until you run

Gulp publish

 F5 in browser to see the file pushed

[youtube https://www.youtube.com/watch?v=0GTVclnt7wg&w=560&h=315]

 

- Advertisement -

LEAVE A REPLY

Please enter your comment!
Please enter your name here

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

CONNECT FOR MORE CONTENT

DO NOT MISS THOSE ARTICLES

Recent Comments