Upload changed display templates to SharePoint using Gulp

Here is a quick tip which might be helpful when working with display templates. A typical SharePoint solution can have a large number of display templates but while working with them, you might me modifying/customizing only one at a time. Here is a quick gulp task I have put together which watches for changes in the HTML file of the display template and uploads only the changed display templates to the Master Page gallery.

	var gulp = require('gulp');
	var spsave = require('gulp-spsave');
	//Display Templates. Watch all display template html files and only upload the ones that change
	gulp.task('watch:displayTemplates', function () {
	var watcher = gulp.watch("DisplayTemplates/*.html");
	return watcher.on('change', function (event) {
	console.log('File ' + event.path + ' was ' + event.type);
	uploadToSharePoint(event.path);
	});
	});
	function uploadToSharePoint(files) {
	return gulp.src(files)
	.pipe(spsave({
	username: "user@tenant.onmicrosoft.com",
	password: "password",
	siteUrl: "https://tenant.sharepoint.com/sites/intranet/",
	folder: "_catalogs/masterpage/Display Templates/Search",
	checkin: true,
	checkinType: 1
	}));
	}

view raw watch:displaytemplates.js hosted with ❤ by GitHub

Then I just start the watch task and change/save a display template:

Whenever I save an HTML file of my display template, it gets uploaded and checked-in in the Master Page Gallery. That causes a corresponding JS file to get generated automatically so I don't have to worry about managing it. 

If you are maintaining your Display Template JS files in source control, you will have to remember to copy the generated JS file back into your solution. 

Hope this helps you speed up your Display Template development. I have uploaded this project on GitHub here: https://github.com/vman/Gulp.DisplayTemplates

Thanks for reading!