gulp-spsave : Save files to SharePoint using Gulp

Upload files to SharePoint using gulp-spsave



For those who are new to Gulp, Gulp is node based task runner which prefers code over configuration. Gulp has watcher inbuilt. Hence it can automatically watch for any changes in file.

Upload Files to SharePoint

Two impressive gulp plugins are available would facilitate uploading of files to SharePoint. We will talk about spsave in this post.



Spsave is simple yet powerful plugin developed by s-kainet to upload files directly to SharePoint.  Below is a simple implementation of the same:

gulp.task(“copyToSharePoint”, [“buildJS”], function(){

return gulp.src(“./build/*.js”)


username: settings.username,

password: settings.password,

siteUrl: settings.siteUrl,

folder: “YourAppAssets/js”




Where “settings” is the settings file where you can store sensitive information.

Vardhaman Deshpande has integrated this plugin with gulp watcher functions along with other gulp functions to achieve following:

  • Concatenate all js files into single js file
  • Minify js file
  • Rename file to min.js
  • Upload files to SharePoint
  • Watch for any changes in file and upload to SharePoint


Following are the plugins that are used in demo:

  • gulp-concat : Used to bundle js files.
  • gulp-uglify : Used to minify the js files
  • gulp-rename : Used to rename the minified file to .min.js
  • gulp-spsave : Used to upload files to SharePoint




Shrarepoint 2013 Display Templates

Display Templates
Display Templates control which managed property is shown in the search results and how they appear in the Web Part. Each Display Template has two files: an HTML version of the Display Template that you can edit in your HTML editor, and a .js file that is for SharePoint use and should never be modified.
Control Template provides HTML to structure the overall layout for how you want to present the search results. For example, the Control Template might provide the HTML for a heading, beginning and end of a list. The Control Template is rendered only once in the Web Part.
Item Template provides HTML that determines how each item in the result set is displayed. For example, the Item Display Template might provide the HTML for a list item that contains a picture, three lines of text that are mapped to different managed properties associated with the item. The Item Display Template is rendered one time for each item in the result set. So, if the result set contains ten items, the Item Display Template creates its section of HTML ten times.
For example to customize template for search results web part, you need to change following things:

OOTB search results will be displayed in following format:
If we want the above data to be displayed in tabular format, few changes needs to be done:
Explore Display Templates
Open the required site in SharePoint designer.
Navigate to the following highlighted path:

You can see few files with suffix Control_ these are control templates and one marked with Item_ are item templates. The best way to create new display template is copy an existing display template to new one and edit the same. In our example, we will copy Control_SearchResults.html and name it as Control_SearchResults1.html. For item template, we will copy Item_Default.html and name it as Item_Default1.html.
Explore Control Display Template:
Open Item_Default1.html in SharePoint designer and make
Header Properties
This section has Display Template header properties that provide information to SharePoint about Display Template, <title> will be displayed under web part Edit Properties to choose from.
Script Block
This section is used to reference JavaScript and CSS files.
        $includeLanguageScript(this.url,”~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js”);
        $includeScript(this.url,”~sitecollection/style library/slider/js/jquery-1.9.1.min.js”);
        $includeCSS(this.url,”~sitecollection/style library/Slider/css/example.css”);
Few important points to note here:
·          Any JavaScript Code should be inside  <!–#_ <JavaScript Code> _#–>
·          Use value assigned to variable using _#=   example: <a  href =”_#=LinkURL=#_”>
·          In Control Template  _#=ctx.RenderGroups(ctx) =#_  is used to render  HTML items (actual search results) from Item template.
·          For CSS styling, wrap _#=ctx.RenderGroups(ctx) =#_ with a div and apply css style, this will style all items coming from Item Template. Point to note here is, most outer <div>with ID matching template title will never render in HTML, so be careful not to apply style to outer <div>or it will never reflect.
·          To call a JavaScript function after Display Template is completely rendered use the AddPostRenderCallback function.
           AddPostRenderCallback(ctx, function() {
           //code to execute
There is another way to achieve this by using:
ctx.OnPostRender = function() {
Explore Item Display Template
Header Properties
In Item Template Header Property  <mso:ManagedPropertyMapping> is used to map Search Managed Properties, retrieved from search query and map them to fields on Item Display template.
<mso:ManagedPropertyMapping msdt:dt=”string”>'Title':'Title','Path':'Path','Description':'Description','EditorOWSUSER':'EditorOWSUSER&#39 </mso:ManagedPropertyMapping>
In order to use a Search Managed Property, it should be first added under ManagedPropertyMapping header.
mso:ManagedPropertyMapping: This property takes the managed properties that are used by search and maps them to values that can be used by the Display Template. The property is a comma-delimited list of values that uses the following format: ‘property display name'{property name}:’managed property. For example: ‘Picture URL'{PictureURL}:’PublishingImage;PictureURL;PictureThumbnailURL’.
Same as Control Template, Item Template also has Script Block and Outer DIV with matching DIV ID as template name.
DIV Block
Scripting should be put under outer DIV. After you map a property in header, you can get its value in script by using the following code:
To display data in tabular format:
<tr bgcolor=”#CCCCCC”>
<th >Title</th><th>Status</th><th>Start Date</th><th>Company</th>
<tr >
 <td >
 <div><img src=_#=ctx.CurrentItem.csr_Icon=#_ alt=”Document Icon” >_#=ctx.CurrentItem.Title=#_<br><b>Purpose:</b>_#=ctx.CurrentItem.RefinableString01=#_</div>